How can I make a custom line type in high charts

Question

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-allowpointselect-column/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            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]
        }]
    });


    // the button action
    $('#button').click(function () {
        var chart = $('#container').highcharts(),
            selectedPoints = chart.getSelectedPoints();

        if (chart.lbl) {
            chart.lbl.destroy();
        }
        chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60)
            .attr({
                padding: 10,
                r: 5,
                fill: Highcharts.getOptions().colors[1],
                zIndex: 5
            })
            .css({
                color: 'white'
            })
            .add();
    });
});

using high charts i can set the chat type to 'spline' creating a carved line however I would really like to make my own line type which goes straight for about 80% then curves up or down close to the point.

Any help is much appreciated

Paweł Fus Paweł Fus · Accepted Answer · 2015-03-09T12:09:32

Maybe you just want to use step option? See API.

If not (since threshold can be on start/middle/end of the line between points) then wrap getSegmentPath method: http://jsfiddle.net/sqdLj33a/

(function (H) {
    H.wrap(H.seriesTypes.line.prototype, 'getSegmentPath', function (p, segment) {
        var s = this,
            segmentPath = [],
            level;

        if (s.options.customStep) {
            level = s.options.levelStep;
            // build the segment line
            H.each(segment, function (point, i) {

                var plotX = point.plotX,
                    plotY = point.plotY,
                    lastPoint;

                // moveTo or lineTo
                segmentPath.push(i ? 'L' : 'M');

                // step line 'center':
                if (i) {
                    lastPoint = segment[i - 1];
                    segmentPath.push(
                    plotX + (lastPoint.plotX - plotX) * level,
                    lastPoint.plotY, 
                    plotX + (lastPoint.plotX - plotX) * level,
                    plotY);
                }

                // normal line to next point
                segmentPath.push(point.plotX, point.plotY);
            });
        } else {
            segmentPath = p.call(s, segment);
        }
        return segmentPath;
    });
})(Highcharts);

And series options:

    series: [{
        customStep: true,
        levelStep: 0.2, // 80%
        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]
    }]

Of course, if you want different path, then simply change segmentPath array.

How can I make a custom line type in high charts

1 Answers