troubleshooting Question

how to customize the text in the legend in highcharts

Avatar of altariamx2003
altariamx2003Flag for Mexico asked on
JavaScriptHTMLScripting Languages
3 Comments1 Solution3832 ViewsLast Modified:
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' }
               }
            ]
  });
});

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
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros