How to Render SVG Charts with Contex

Most of the time, web developers reach for JavaScript to build beautiful graphs and charts. Because the server always has an up-to-date view of the data and a convenient way to send down changes, we don’t have to settle for a cumbersome workflow that splits our focus across the client-server boundary.

We can render graphics the same way we render HTML, with server-side rendering. That means we need a dependency that can draw our charts on the server and send that chart HTML down to the client.

We’ll use the Contex charting library to handle our server-side SVG chart rendering. Using Contex, we’ll build out charts in two steps. We’ll initialize the chart’s dataset first, and then render the SVG chart with that dataset. We’ll continue building out the elegant reducer pipeline that our component uses to establish state—adding new functions in the pipeline for each step in our chart building and rendering process. We’ll see how the reducer pattern can help us build out and maintain even a complex state in an organized way.

First, let’s initialize the data.