How to draw following graph using Scatter Plot highchart?

Question

How can i draw following graph using Scatter Plot highchart? I am trying to achieve this kind of plot that is being displayed in screenshot using Highcharts. Till now I am able to Draw point onto the chart using Scatter Plot but I am having trouble plot these two red line from X-axis and Y-axis. Can anyone of you help me here the what I need to do to draw two straight line from a point, one toward X-axis and second toward Y-axis. The attached code is only the JS code that I used for ploting the scatter graph. Thanks

/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Height Versus Weight of 507 Individuals by Gender'
    },
    subtitle: {
        text: 'Source: Heinz  2003'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Strategic Alignment'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true,
    },
    yAxis: {
        title: {
            text: 'Process & Technology Integration'
        },
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            lineWidth: 2
        }
    },
    series: [{
            name: ' ',
            color: 'Red',
            data: [[3.1, 3]]
        }]
});
});

here is my code.

morganfree morganfree · Accepted Answer · 2017-04-26T18:43:54

Use renderer.path to draw a line. You can draw the line on load event and redraw it on redraw event.

 events: {
    load: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point;

      point.path = this.renderer.path()
        .add(point.series.group)
        .attr({
          stroke: point.color,
          'stroke-width': 1,
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        });
    },
    redraw: function() {
      var point = this.series[0].points[0],
        {
          plotX: x,
          plotY: y
        } = point,

        path = point.path;

      if (path) {

        path.attr({
          d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
        })
      }
    }
  }

example: https://jsfiddle.net/5j208Lpb/

The other solution is to define 2 additional points which will have be drawn outside the plot area. You need to set axes limits and set series.lineWidth to 1.

example: https://jsfiddle.net/5j208Lpb/1/

How to draw following graph using Scatter Plot highchart?

1 Answers