CODEWITHSUNDEEP
highcharts
Andy
Andy

Reputation: 503

Remove Highchart line when no value

I have a line chart like this: http://jsfiddle.net/vbLdsodu/

How do i remove or hide the line after july? I want the date axis to continue but don't show the line where the values is 0.

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 0, 0, 0, 0, 0]
        }]
    });
});

Upvotes: 0

Views: 338

Answers (1)

gabe3886
gabe3886

Reputation: 4265

You can replace 0 with null in the data which will then keep the axis listing the months, but stop the line from drawing.

It's also possible to do this part way through the graph and the line will draw from the next data point.

Upvotes: 2

Related Questions