CODEWITHSUNDEEP
javascripthighcharts
jleach
jleach

Reputation: 7800

Highcharts add single line to column chart

I'm working with Highcharts and have a basic dual-series column chart. I want to add a single data-driven line to the chart, as show in the red box in the image below, but I'm unsure the best approach (this will go on the current month to note a projected month-end value).

enter image description here

I've considered three ways to do this but am not sure the best route:

  1. Highcharts Renderer: I believe I can use the renderer and obtain access to the data values and render positions fairly easily, and drawing the shape would not be a big deal. However, I don't believe I'll have the "resposive" behavior, e.g., the line would be initially drawn, but if the user widens the screen, the line will stay put while the rest of the chart's width increases (looking at the output for the renderer, I do not see any element that I can link up with a resize event, and even so the math would be less than ideal at that point).
  2. HTML absolute overlay and reposition with the window resize event. The downside here is getting the required data point values/positions converted and maintaining those ratios during the resize event.
  3. Third series with a single value. The problem I foresee here is formatting the series so it sits on top of the target column (I don't know of a "single line" type series that I can use for this). I tend to think this would be ideal, as if I can configure the formatting correctly, it'd be the responsibility of highcharts to render it, so it's more "in context" with the rest of the chart. Unfortunately, I'm unsure if I have a series type and formatting options sufficient to generate the required display. Also, rather than a "single line" render type of series, I considered possibly hacking a stacked column with the bottom column transparent, yet the other formatting issues (such as positioning over the top of the existing series column) still stands.

Has anyone had to do something like this before and could offer some insight on how it was accomplished? Thanks.

Upvotes: 0

Views: 1454

Answers (1)

morganfree
morganfree

Reputation: 12472

Drawing a custom line is the cleanest solution I guess - you can make that line responsive easily by hooking into redraw event and do re-positioning/resizing.

A series approach doesn't require a lot coding, just setting a few options. You can use a scatter type with a custom marker symbol.

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) {
  return ['M', x, y, 'L', x + w, y];
};

{
  type: 'scatter',
  showInLegend: false,
  enableMouseTracking: false,
  marker: {
    symbol: 'line',
    lineColor: 'orange',
    lineWidth: 6,
    radius: 20
  },
  data: [
    [1.15, 140]
  ]
}]

example: http://jsfiddle.net/g6fjjach/

Upvotes: 3

Related Questions