Home / Questions / 130720
Accepted
raintrooper
Asked: 2020-01-13 10:24:05 +0800 CST 2020-01-13 10:24:05 +0800 CST

Add label on Highcharts JavaScript chart

  • 772

I am trying to add a label or legend to the chart so I can display it in the center of the chart all the way to the top.

This label must carry the value of the Legend variable.

If you can help me thank you very much.

var Cuota=2000;
var CuotaGrupo=1500; 
var San=200; 
var Tavil=700;
var Otros=100; 
var Frente='Frente';
var Leyenda = 4000;      
      var contador = 0;
	    var contador2 = 0;
	    var arreglo = [];
	    Highcharts.chart('subcontainer', {
		    chart: {
			    type: 'column'
		    },
		    title: {
			    text: 'Ingreso  ' + Frente
		    },
		    subtitle: {
			    text: 'Subtitulo'
		    },
		    xAxis: {
			    categories: [Frente,  ],
			    crosshair: true
		    },
		    yAxis: {
			    min: 0,
			    title: {
				    text: 'TN '
			    }
		    },
		    tooltip: {
			    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} tons</b></td></tr>',
			    footerFormat: '</table>',
			    shared: true,
			    useHTML: true
		    },
		    plotOptions: {
			    column: {
				    pointPadding: 0.2,
				    borderWidth: 0,
				    dataLabels: {
					    enabled: true,
				    }
			    }
		    },
		    legend: {
 
			    layout: 'vertical',
			    align: 'right',
			    verticalAlign: 'top',
			    x: -40,
			    y: 80,
			    floating: true,
			    borderWidth: 1,
			    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
			    shadow: true
		    },
		    credits: {
			    enabled: false
		    },
		    series: [{
			    name: 'Cuota',
			    data: [Cuota]
		    }, {
			    name: 'CuotaGrupo',
			    data: [CuotaGrupo]
		    }, {
			    name: 'San',
			    data: [San]
		    }
            , {
			    name: 'Tavil',
			    data: [Tavil]
		    }
            , {
			    name: 'Otros',
			    data: [Otros]
		    }]
	    });
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="subcontainer" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

javascript

1 Answers

  1. Best Answer

    This option. add the values ​​that you want

    var subtotal =  San + Tavil + Otros;

    and then i show them

    var Cuota=2000;
var CuotaGrupo=1500; 
var San=200; 
var Tavil=700;
var Otros=100; 
var Frente='Frente';
var subtotal =  San + Tavil + Otros;    
      var contador = 0;
	    var contador2 = 0;
	    var arreglo = [];
	    Highcharts.chart('subcontainer', {
		    chart: {
			    type: 'column'
		    },
		    title: {
			    text: 'Ingreso  ' + Frente
		    },
		    subtitle: {
			    text: 'Subtitulo'
		    },
		    xAxis: {
			    categories: [Frente,  ],
			    crosshair: true
		    },
		    yAxis: {
			    min: 0,
			    title: {
				    text: 'TN '
			    }
		    },
		    tooltip: {
			    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} tons</b></td></tr>',
			    footerFormat: '<tr><td><span >(Total: ' + subtotal + ')</span></td></tr></table>',
			    shared: true,
			    useHTML: true
		    },
		    plotOptions: {
			    column: {
				    pointPadding: 0.2,
				    borderWidth: 0,
				    dataLabels: {
					    enabled: true,
				    }
			    }
		    },
		    legend: {

			    layout: 'vertical',
			    align: 'right',
			    verticalAlign: 'top',
			    x: -40,
			    y: 80,
			    floating: true,
			    borderWidth: 1,
			    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
			    shadow: true
		    },
		    credits: {
			    enabled: false
		    },
		    series: [{
			    name: 'Cuota',
			    data: [Cuota]
		    }, {
			    name: 'CuotaGrupo',
			    data: [CuotaGrupo]
		    }, {
			    name: 'San',
			    data: [San]
		    }
            , {
			    name: 'Tavil',
			    data: [Tavil]
		    }
            , {
			    name: 'Otros',
			    data: [Otros]
		    }]
	    });
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="subcontainer" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    • 3