How to add a highlight mark/area to a chart?

2
votes

I have a time series chart created using D3 js. I wanted to add highlight areas for certain time intervals to show certain activity occurred during that particular time (there will be different types of activities so each highlight mark will have different color based on its type). I want this highlight area to cover the whole chart vertically from top to bottom.

Here is a sample: enter image description here

I came across this question which shows how to do it using highcharts.

As of now I use another charting library and I draw an area chart whenever I want to display such highlight areas. Is there a better way to do it using d3 js or should I draw a set of area charts?

1
javascriptchartsd3.js

1 Answers

5
votes

I saw this question once. Time for example.

You can combine area and line chart together.

// y.domain()[1] so area is drawn to cover all chart
var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.x_axis); })
    .y0(height)
    .y1(function(d) { return y(y.domain()[1]); });

var line = d3.svg.line()
    .x(function(d) { return x(d.x_axis); })
    .y(function(d) { return y(d.y_axis); });

Here's an example of AAPL stock chart with highlight from 2012-04-13 to 2012-04-17.

http://vida.io/documents/TzcZJX4itBebKciQZ

Full code:

https://gist.github.com/dnprock/dea634bfdb3c33149c61