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>

ewolden · Accepted Answer · 2019-04-26T10:18:51.477

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>

As the question asks for "series label in only one of the charts" I think maybe the use of `plotOptions.series.label` for per chart settings might be appropriate to avoid doing `enabled: false` on every series in several charts? — Halvor Holsten Strand, Aug 07 '18 at 08:13
Looks good and solves actual question. I'll drop a fiddle where I set the global default to `false`, which might be worth it if there are a lot of charts to individually disable: [JSFiddle](http://jsfiddle.net/zuspdm2L/3/) — Halvor Holsten Strand, Aug 07 '18 at 08:26

Rohit Verma · Answer 2 · 2018-08-07T06:48:18.167

1

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>

edited Aug 07 '18 at 06:48

answered Aug 07 '18 at 06:26

Rohit Verma

3,657
7
37
75

And it's changing the color of the series as well. I need the series color to be as it , just need to update the label color. – Simsons Aug 07 '18 at 06:29
2

I'm confused. How does this address labels in only 1 of 5 charts, compared to the code in the question? – Halvor Holsten Strand Aug 07 '18 at 07:39
@HalvorStrand, Marked this one as answer as it partially answered the question , though 1 of 5 charts part is not answered and I am browsing through thigh chart API – Simsons Aug 07 '18 at 11:15

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

2 Answers2