Axis Chart with Annotations
Axis chart components using d3-annotation plugin.
Here are several examples of rendering annotations with a
d2b.axisChart. Of course any of the examples and chart types below can be mixed and matched on a single
- Basic Usage
- Responsive Annotations
- Bar Chart
- Line Chart
- Scatter Chart
- Box Plot
- Chart Level Annotations
- Graph Level Annotations
This example includes a couple basic annotations at the
value level. One thing to note is that only the first generator in the
generators array will render annotations. So in this example only the
d2b.svgArea has annotations and not the
For the area chart you can have an annotations array for each point, the arrays can contain an annotation for location
There are many ways to make the annotations responsive. This example simply uses a dynamic dx and type attributes derived from the body width. Try resizing the window to see how the annotations are affected. Once a width threshold is passed the annotations switch to the
Here, because the bars can be bulky, I've reduced the opacity of the underlying rectangles.
Similar to the area chart, the box plot can have multiple annotations per "box". They can have annotations at the locations of
So far the examples have gone over adding point level annotations to each of the different d2b graph types.
Annotations can also be added to the chart data. In addition to providing x / y values, you may also provide values for x2 and y2 to be used in threshold or rectangle annotations. The reserved value of
Infinity can be used to indicate that a threshold or rectangle should extend to the edge of the chart.
Other than the default functionality provided by the d3.annotation plugin you can also provide dx / dy values to the annotation subject. This should be a value between 0 and 1 and will be the percentage offset for the label in its region's or threshold's height / width.
You may also add an array of annotations to each graph object. These annotations have the same features as the chart level annotations. They also will be removed and added along with their respective graph whenever the legend toggles are used.