Drawing rectangles on a line graph

Question

I have a straightforward line chart.

I'd like to let a user draw rectangles over the top of the graph that snap to the gridlines. See here for a visual example:

I've had a look at Highcharts and d3 but neither have a facility that allows the user to 'draw' on top of graphs.

Before diving into the APIs and/or reinventing the wheel with lots of code, I was hoping someone has achieved this (or something similar) before, or could point me in the right direction?

Answer 1

Speaking from my experience with Highcharts, you can absolutely draw on top of graphs. It's simply a matter of how you want to go about it.

I can think of two ways to pursue this goal:

1. Draw several "dummy" line series across the chart that will create the effect you're looking for. The benefit of doing this is that the lines will stay fixed with the chart grid, will remain responsive along with the rest of the chart when the browser window or viewport is resized, and will export cleanly in various formats. There are a few parameters you can use to keep the "dummy" series out of the legend ( showInLegend: false ) and prevent them from being interacted with by the user ( enableMouseTracking: false ).
2. Use the renderer.rect method to draw rectangles in your chart (see http://api.highcharts.com/highcharts#Renderer.rect ). Here's a basic example taken from Highcharts' API documentation: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect-on-chart/

The API documentation is chock full of examples. I hope this has been helpful in your quest.

Answer 2

You can use the the columnRange series in combination with line.

plotOptions: {
  columnrange: {
            pointPadding: 0,
    groupPadding: 0,
    borderWidth: 1,
    borderColor: 'black'
  }
},

legend: {
  enabled: false
},

series: [{
  type: 'line',
  data: [
    [12, -20],
    [2, -10]
  ]
}, {
    color: 'rgba(0,0,0,0)',
  name: 'Temperatures',
  data: [
    [-9.7, 9.4],
    [-8.7, 6.5],
    [-3.5, 9.4],
    [-1.4, 19.9],
    [0.0, 22.6],
    [2.9, 29.5],
    [9.2, 30.7],
    [7.3, 26.5],
    [4.4, 18.0],
    [-3.1, 11.4],
    [-5.2, 10.4],
    [-13.5, 9.8]
  ]
}]

Example:

• http://jsfiddle.net/8vu224mc/