CODEWITHSUNDEEP
javascripthighcharts
diablo9983
diablo9983

Reputation: 23

How to match columns height with spline in Highcharts

I'm using Highcharts to draw a spline. This works good. I'm using secondary series (columns) for another data. My problem is: how to set column height to be matched with spline.

As far i've done this: jsfiddle

Columns have height almost i need, but not all.

It is possible at all?

Relevant code:

$('#chart').highcharts({
    title: {text: 'Chart'},
    chart: {
        type: 'spline'
    },
    xAxis: {
        title: {
            text: 'X-Axis'
        }
    },
    yAxis: {
        title: {
            text: 'Y-Axis'
        },
        labels: {
            enabled: false
        }         
    },
    series: [{
        name: 'Chart',
        data: chdata,
        marker: {
            enabled: false
        },
    }],
    legend: {
        enabled: false
    }
});

var chartObj = Highcharts.charts[$('#chart').attr('data-highcharts-chart')];
var d = [];
for(var i = 0; i < ldata.length; i++) {
    d.push([ldata[i],getYValue(chartObj,0,getClosest(ldata[i],bdata[0]))]);
}

chartObj.addSeries({
    type: 'column',
    pointWidth: 1,
    borderWidth: 0,
    data: d
});

I've tried even with plotLines, but it have height of whole chart.

Thanks, Bartek

Upvotes: 2

Views: 231

Answers (1)

SteveP
SteveP

Reputation: 19103

Rather than plotting the height of the closest point, try plotting the average height of the points either side of your bar.

You can get even closer if you work out a linear best fit for your bar on the line between the points either side. Something like:

function getY(xVal,points) {

var higher = 0;
var lower=0;
for(var i=0;i<points.length;i++){
    if (points[i][0] > xVal) {
        higher=i;
        lower=i-1;
        break;
    }
}

return points[lower][1] + ((points[higher][1]-points[lower][1])*(xVal-points[lower][0])/(points[higher][0]-points[lower][0]));
};

http://jsfiddle.net/5h471o3d/

Upvotes: 2

Related Questions