We help IT Professionals succeed at work.

how to customize the text in the legend in highcharts

3,692 Views
Last Modified: 2017-04-09
hi

i got this chart
thechart
$(function () {
  $('#laprueba').highcharts
  ({
     title: { text: 'Resultados segun parametros seleccionados' },
     xAxis: { categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'] },
     tooltip: { shared: true }, 
     plotOptions: {   column: { stacking: 'normal' }   },
     yAxis: [
              { 
                labels: { enabled: false }, title: { text: '' },
	            allowDecimals: false, min: 0, title: { text: '' }, 
		        stackLabels: { enabled: true, formatter: function() { return  this.stack; } }
              },                            { 
                labels: { enabled: false }, title: { text: '' },
	            allowDecimals: false, min: 0, title: { text: '' }, 
		        stackLabels: { enabled: true, formatter: function() { return  this.stack; } }
              },                            { 
                labels: { enabled: false }, title: { text: '' },
	            allowDecimals: false, min: 0, title: { text: '' }, 
		        stackLabels: { enabled: true, formatter: function() { return  this.stack; } }
              }, 
            ],     plotOptions: {   column: { stacking: 'normal' }   },
            series: 
            [
               {
		 type: 'column',
                 name: 'Cursos-2016',
                 data: [4, 102, 14, 88, 42, 19, 12, 12, 14, 4, 1, 1], stack: '2016',color: Highcharts.getOptions().colors[0]
               },
               {
		 type: 'column', name: 'Cursos-2017',
                 data: [2, 2, 3,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ], stack: '2017',showInLegend: false,color: Highcharts.getOptions().colors[0]
               },
               {
		 type: 'column', name: 'Diplomados-2016',
                 data: [0,0 , 2, 18,0 , 71, 14, 5, 5,0 , 2, 1], stack: '2016',color: Highcharts.getOptions().colors[1]
               },
               {
		 type: 'column', name: 'Diplomados-2017',
                 data: [2, 2, 3, 1,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ], stack: '2017',showInLegend: false,color: Highcharts.getOptions().colors[1]
               },
	       {
                 name: 'Ventas (Inscripciones) 2016', type: 'spline', yAxis: 1,
                 data: [14022.9, 11284.99, 847, 37803.35, 18647.95, 22947, 21077, 31609.28, 40776.6, 3411, 14741, 19770],
                 marker: { enabled: true }, color: Highcharts.getOptions().colors[3],
                 tooltip: {  valuePrefix: '$ ', valueSuffix: ' USD' }
               },
 	       {
                 name: 'Ventas (Inscripciones) 2017', type: 'spline', yAxis: 2,
                 data: [14250, 700, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                 marker: { enabled: true }, color: Highcharts.getOptions().colors[4],
                 tooltip: {  valuePrefix: '$ ', valueSuffix: ' USD' }
               }
            ]
  });
});

Open in new window


I wanna know if it is possible to customize the legend section without to move any of my tooltip, I mean change the legend section from this:legend1 to thislegend2
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2017
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
thx for your answer leonidas

I tried that, but the problem is that it change me the text of the last two series "Ventas (Inscripciones) 2016" and "Ventas (inscripciones) 2017"

It is possible to apply it just for the first two series????

Author

Commented:
I found how to modify the first 2 series name on the legend

legend: {
            layout: 'horizontal',
            labelFormatter: function () {
				if (this.name.indexOf("-") !=-1) 
				{ 
				  temp = this.name.split("-");
				  return temp[0]; 
				}
				else { return this.name; }
                
            }
        },

Open in new window


All credits goes to leonidas without his help I will never found the solution
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.