CODEWITHSUNDEEP
javascripthighcharts
colestrode
colestrode

Reputation: 10668

Disable series through configuration in highcharts

I have a line chart with several series. When viewed all at once the chart is confusing, so I would like to have certain series hidden initially.

I know I can programmatically turn off series, but is there a way to do this when initializing the chart?

Upvotes: 14

Views: 19493

Answers (3)

Aarati Sakhare
Aarati Sakhare

Reputation: 9

https://api.highcharts.com/highcharts/plotOptions.series.enableMouseTracking Enable or disable the mouse tracking for a specific series. This includes point tooltips and click events on graphs and points. For large datasets it improves performance.

Upvotes: 0

arcseldon
arcseldon

Reputation: 37155

Believe there is a configuration option for this.

Within Series, set "visible = false"

The legend will still list the series but greyed out. And the series itself will be hidden in the chart upon initial display.

Example configuration:

series: [{
            name: 'HiddenByDefault',
            legendIndex: 1,
            visible: false,
            color: '#4572A7',
            type: 'spline',
            data: [a, b, c],
            tooltip: {
                valueSuffix: ' ¥'
            }

        }

Upvotes: 40

Mayank Jaiswal
Mayank Jaiswal

Reputation: 13106

You can achive this by hiding all the series that you dont want to see just after the chart has completed loading.

Fiddle : http://jsfiddle.net/bHDLX/

Code: 

$(function () {
// create the chart
$('#container').highcharts({
    chart: {
        events: {
            load: function(event) {
                alert ('Chart loaded');
                this.series.forEach(function(d,i){if(d.options.id==1)d.hide()})
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        id : 1,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    },
            {
        animation: false,
        id : 2,
        data: [29.9, 144.0, 176.0, 71.5, 106.4, 129.2, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    },{
        animation: false,
        id : 3,
        data: [ 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]     
    }]
});

});

Upvotes: 8

Related Questions