How to set series-label to false by default and change the color of series label text in highchart

Question

I have 5 high charts on my page and I need series label in only one of the charts.

But the moment I include series-label.js , it adds series label to all charts.

Also how do I change the color of the series label. For example , in following example I need all the series label to be of color black.

 Highcharts.chart('container', { chart: { type: 'line' }, series: [ { name: 'Unites States', data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8] }, { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

The Highcharts way of hiding labels on a per series basis is by using the series.line.label.enabled toggle. To hide labels for all series in a chart the following can be toggled ( plotOptions.series.label.enabled ):

plotOptions: {
  series: {
    label: {enabled: false},
    ...
  }
}

Similarly, to change the color of the label for a series the series.line.label.style can be used, or to change the color for all series in a chart ( plotOptions.series.label.style ):

plotOptions: {
  series: {
    label: {style: {color: 'black'}},
    ...
  }
}

Which leads to this example:

 Highcharts.chart('container', { chart: { type: 'line' }, title: { text: 'No labels' }, plotOptions: { series: { label: { enabled: false } } }, series: [ { name: 'Unites States', data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8] }, { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); Highcharts.chart('container2', { chart: { type: 'line', }, title: { text: 'Black labels' }, plotOptions: { series: { label: { style: { color: 'black' } } } }, series: [ { name: 'Unites States', data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8] }, { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 2

I think you want like this:-

 Highcharts.chart('container', { chart: { type: 'line' }, series: [ { name: 'Unites States', data: [7.5, 15.2, 18.7, 21.5, 25.9, 30.2, 29.0, 28.6, 27.2, 20.3, 18.6, 14.8], }, { name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], }] }); 

 .highcharts-label text {fill: rgb(0, 0, 0) !important;} 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>