Annotating Nivo

21 Jul, 20201 Min Read — In development, javascript, react

Edit: I moved away from this project because my workflow switched over to Svelte

I have started looking at alternative to Semiotic as my go to React based charting library.

I still really like Semiotic, but I am also looking for a solution that I can run in a node enviroment and produce a single SVG that can then be opened in Illustrator for further styling for print. Unfortunately, semiotic's DOM abstraction uses layered SVG node and HTML divs to make everything work.

There are a few nice looking React on D3 libraries out there - but I decided to start by taking a look at Nivo - primarily because it has it's own server side rendering API so I know that I should be able to get server side rendering for exporting to Illustrator working.

Getting it to work

Let's see how hard it is to get it up and running.

<ResponsiveLine
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'transportation',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
colors={{ scheme: 'nivo' }}
pointSize={10}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabel="y"
pointLabelYOffset={-12}
useMesh={true}
layers={['markers', 'axes', 'areas', 'crosshair', 'lines', 'points', 'slices', 'mesh', 'legends']}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
/>

Pretty straight-forward. This graph is just a copy-paste from the documentation. And while I would not recommend using a line graph to show categorical variables (I assume this is due to trying to use the same data everywhere in the demo) it is great that copying the demo code works.

© 2019–20 by Chris Knox. All rights reserved.
Last build: 2020-11-25