CODEWITHSUNDEEP
chartshighchartsbar-chartlinechart
Php Symfony Guru
Php Symfony Guru

Reputation: 147

highcharts column chart with line, need line start at bar start

here is demo fiddel,

need line chart start from first column left border to last column right border like image below

enter image description here

in demo fiddel it is start for center of bars.

here is my code of series or you can see in fiddel :

series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'line',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    },
    step: 'center',
    rangeSelector: {
    selected: 0
        }
}]

Upvotes: 1

Views: 826

Answers (2)

Kamil Kulig
Kamil Kulig

Reputation: 5826

I achieved the desired result in two steps:

  1. I added a point before the first point and after the last point. Then I set min and max properties of xAxis. This causes that additional points are not visible but lines to them are.

  2. Create and apply a clip path to line series. The dimensions of clipRect are based on the x positions of the first and the last column:

    var columnSeries = this.series[0],
  lineSeries = this.series[1],
  firstPoint = columnSeries.points[0],
  lastPoint = columnSeries.points[columnSeries.points.length - 1],
  clipRect = this.renderer.clipRect(firstPoint.shapeArgs.x, 0, lastPoint.plotX, 9999);

lineSeries.graph.clip(clipRect);

Live demo: http://jsfiddle.net/BlackLabel/x2r34huc/

API reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip

Upvotes: 1

coder
coder

Reputation: 906

You need to add some javascript after the highcharts script code. The script is as following:

<script>

var rectangles = document.querySelectorAll(".highcharts-series-group > g > rect");
var last = parseInt(rectangles[rectangles.length-1].getAttribute("x")) + parseInt(rectangles[0].getAttribute("x"));
var increment = (last)/11; 
// 11 is the no of gaps in the bar graph
var x=0;

for(i=0;i<rectangles.length;i++)
{
    rectangles[i].setAttribute("x",x);
    x= x+increment;

}
</script>

here is the jsfiddle http://jsfiddle.net/jkwvus8u/15/

This is probably what you want.But add this code after the highcharts code since it will work on the high chart generated content

Upvotes: 0

Related Questions