PlotLines and Breaks Together

[kolhenil]

Hi,

I have applied breaks to few of the ticks in the highcharts and want to plot a line in between the "broken" ticks. Line gets plotted very well in between the normal ticks but it behaves differently for the shrinked columns (broken ticks).
I tried this using the JS Fiddle but was unable to do so.

PFB the Fiddle URL of my trial
http://jsfiddle.net/ftsj05a8/

In the Fiddle, I have applied breaks from 5 to 6 with break size being 0.5.
and I have tried plotting a line at 5.5 which comes under the "broken" ticks.

and just below the same, I have plotted a line in between 2 and 3, the normal ticks, which is getting plotted very well.
Guidance needed on this front.

Thanks,
Nilesh

[rafalS]

Hi, kolhenil!

When you use breaks between 5-6, you actually delete space between these ticks (and there is nothing left you can work on). Then you try to add plotLine between these ticks, but, as I said, there is nothing you can anchor your plotLine on.
But we don't have to use plotLines. We can write our own functionality that renders something like plotLines using Highcharts SVG Renderer:

Code: Select all

chart: {
    events: {
      load() {
        let chart = this,
          series = chart.series[0],
          points = series.points,
          lineWidth = 2,
          lines = [2, 5],
          x = 0;
        chart.lineGroup = chart.renderer.g('lineGroup').attr({
          zIndex: 3
        }).add();
        lines.forEach((cordinates) => {
          x = points[cordinates].plotX + chart.plotLeft + (points[cordinates + 1].plotX - points[cordinates].plotX) / 2;
          chart.renderer.rect(x, chart.plotTop, 2, chart.plotSizeY)
            .attr({
              fill: 'red'
            }).add(chart.lineGroup);
        })

        chart.lineGroup.translate(-lineWidth / 2, 0)
      }
    }
  },

Array lines = [2, 5] means that the lines will be rendered between 2-3 and 5-6 ticks. You can define an array like this lines = [2, 5, 7, 8] if you need more plotLines.

jsFiddle: http://jsfiddle.net/BlackLabel/xc4hg73j/

API Reference: https://api.highcharts.com/class-refere ... derer#rect

Best regards!