CODEWITHSUNDEEP
javascripthighcharts
duffn
duffn

Reputation: 3760

Highcharts conditional data labels

I'm creating a Highcharts line chart based upon some user input. The user can select 1 or more groupings and a date range and I create a series for each group. This works fine except for that when they select over 3 groups, the chart looks terrible because there are way too many data labels.

I'd like to conditionally enable data labels only when where are less than 4 series on a chart. How can I do that? I'm trying like this but I can't seem to get it to work.

plotOptions: {
    line: {
        dataLabels: {
            enabled: function() {
                return !!(chart.series.length > 3);
            },
            color: '#000000',
            formatter: function() {
                return Highcharts.numberFormat(this.y, 2);
            }
        }
    }
}

Upvotes: 1

Views: 8027

Answers (2)

Ishan Pandya
Ishan Pandya

Reputation: 43

Use Formatter fucntion in dataLables

formatter: function ()  {
    if(this.y!=0)
        return this.y;
    else`enter code here`
        return "";
}

Upvotes: -1

SteveP
SteveP

Reputation: 19093

When you create the series, keep track of how many you create. Also have a javascript variable 'showDataLabels=true'. If the number of series goes above 4 when you are creating them, set showDataLabels=false;

var showDataLabels = true;
// start creating the series.

If num series > 4 showDataLabels = false;

Once you are ready to generate the chart, use:

plotOptions: {
            line: {
                dataLabels: {
                    enabled:showDataLabels,
                    color: '#000000',
                    formatter: function() {
                        return Highcharts.numberFormat(this.y, 2);
                    }
                }
            }
        },

Upvotes: 2

Related Questions