Highchart - Dual Axes Line chart issue

Question

Is it possible to create chart like below diagram , I am unable to do so for the line chart. Kindly suggest

Answer 1

This type of series doesn't exist in the Highcharts, but you should be able to create something similar by rendering dummy series and render custom lines on it by using the SVGRenderer tool.

Demo: https://jsfiddle.net/BlackLabel/rq5b2os1/

  chart: {
    events: {
      render() {
        let chart = this,
          pointWidth = chart.series[0].points[0].pointWidth,
          pointDistance = chart.series[0].points[1].plotX - chart.series[0].points[0].plotX;

        chart.series[1].points.forEach((p, i) => {
          let x = p.plotX + chart.plotLeft,
            y = p.plotY + chart.plotTop;

                    // keep chart responsive
          if (p.customPoint) {
            p.customPoint.destroy();
          }

                    // render point on the column
          p.customPoint = chart.renderer.path(['M', x - pointWidth / 2, y, 'L', x + pointWidth / 2, y])
            .attr({
              'stroke-width': 4,
              stroke: 'black',
              zIndex: 20
            })
            .add();

          if (chart.series[1].points[i + 1]) {
            let nextPoint = chart.series[1].points[i + 1];

                        // keep chart responsive
            if (p.customLine) {
              p.customLine.destroy();
            }

                        // render line between custom points
            p.customLine = chart.renderer.path(['M', x + pointWidth / 2, y, 'L', x + pointDistance / 2, y, x + pointDistance / 2, nextPoint.plotY + chart.plotTop, x + pointDistance, nextPoint.plotY + chart.plotTop])
              .attr({
                'stroke-width': 1,
                stroke: 'black',
                zIndex: 20
              })
              .add();
          }
        })
      }
    }
  },

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

API: https://api.highcharts.com/highstock/chart.events.render

Answer 2

Try the highchart version given in the below link. This may serve your purpose..

https://www.highcharts.com/demo/combo-dual-axes/grid-light