CODEWITHSUNDEEP
javascripthighcharts
Migwell
Migwell

Reputation: 20107

Drop lines with highcharts

If I'm using a scatter plot in Highcharts, is there any way to get drop lines? Drop lines are lines that go from the point back the the x-axis like this:

enter image description here

Upvotes: 0

Views: 174

Answers (1)

GMauro
GMauro

Reputation: 111

You can do this with a combination column-line chart.

See it in action here: http://jsfiddle.net/8qvy79gv/

$(function () {
$('#container').highcharts({
    title: {
        text: 'Combination chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
    },
    labels: {
        items: [{
            html: 'Total fruit consumption',
            style: {
                left: '50px',
                top: '18px',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        }]
    },
    series: [{
        type: 'column',
        name: 'Jane',
        pointWidth: 2,
        data: [3, 2.67, 3, 6.33, 3.33]
    }, {
        type: 'spline',
        name: 'Average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]
});

});

Upvotes: 1

Related Questions