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

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
        }
}]

回答1:

I achieved the desired result in two steps:

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.

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

回答2:

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

来源：https://stackoverflow.com/questions/49425790/highcharts-column-chart-with-line-need-line-start-at-bar-start

标签

charts

Highcharts

bar-chart

linechart