Css style

How to create SVG line charts with React, SSR and Tailwind CSS

In this article, I’ll explain how to “roll your own” SVG line graphics in React using server-side rendering. To use server-side rendering with React, you can use either Next.js Where gatsby.

Screenshots of Gatsby and Nextjs GitHub repository activity line graphs

On the following links you will find a live preview and a GitHub repository for completed line charts using both frameworks.

I’m not going to explain how to get started with either framework, so please consult the documentation if you are unfamiliar with these technologies.

I also used Downwind to style graphics. If you want to do the same, the Tailwind docs contain installation guides for both. gatsby and Next.js.

In the demo sites I used the GitHub REST APIs as a datasource, if you want to do the same you will need a GitHub Personal access token; or if you prefer, I’ve provided some sample data at the links below.

Example data

You can use either of the sample Gists data below.

Example data from the Gatsby page

Example of use

Next.js Page Sample Gist Data

Example of use

What is server-side rendering?

Server-side rendering (SSR) is the ability of an application to convert HTML files on the server into a fully rendered HTML page for the client (the browser). The combination of SSR with server-side data fetching means that you can generate the graphs on the server with data that has been “fetched”, also from the server.

Creating graphs this way means that all data fetching and rendering will work when JavaScript is disabled in the browser or before React has hydrated the DOM.

Rendering charts this way means that they will never appear blank while the data is “fetching” and you won’t see any “jumping” or layout changes after the data is loaded; using this method also ensures your Lighthouse CLS scores are not affected.

Anatomy of a Line Graph

In the sections below, you’ll create a number of different parts that make up a line graph. These are depicted in the diagram below.

Anatomy of a Line Graph

Diagram showing different parts of a line chart Svg

Create a line chart component

Create a new component called and name the file line-chart.js. In the demo sites, I saved this file in a directory called “components”.

The component accepts a prop called data. The shape of the data prop is defined using propTypes.

Render the line chart on a page

Import it in your page component and return it. Destructured page props will look different depending on whether you’re using Gatsby or Next.js. Replace … with the framework-specific props.

Configuration Line Chart

In this step, you will define the variables used to control the different parts of the line chart.

Here is a brief explanation for each of the variables.

  1. chartWidth: The width of the SVG viewBox.
  2. chartHeight: The height of the SVG viewBox.
  3. offsetY: Used to position the tick marks.
  4. paddingX: The left and right padding around the line graph.
  5. paddingY: the top and bottom padding around the line graph.
  6. maxY: the maximum total value of the data array.
  7. guides: an empty array that determines the number of guides.

Line chart properties

The property array is created using a combination of values ​​from the data prop and variables defined in the previous step. Each of the returned values ​​is used in different parts of the line chart.

The two important values ​​to look at here are x and y. These variables are created by combining a number of previously defined variables and the index value of the .map.

Total and date values ​​are returned unchanged.

Creation of the X coordinate

The x coordinate is used to create a position for the marker, the value, and the x value for a polyline point.

The x coordinate is created by using the index value of the .map and dividing it by the length of the data passed on the data prop. By multiplying it by chartWidth and subtracting the paddingX value, the value of the x coordinate never exceeds the bounds of the chart width.

Creating the x coordinate

Diagram showing the iteration of the .map array to create the x coordinate

Creation of the Y coordinate

The y coordinate is used to create a position for the marker, value, and y value for a polyline point.

The y coordinate is created by dividing the total by the maxY value and multiplying it by chartHeight minus the paddingY value. As an extra step, the paddingY and offsetY values ​​are subtracted, creating extra space for the tick marks at the bottom of the chart.

Creating the y coordinate

Diagram showing the iteration of the .map array to create the y coordinate

Creation of the points table

The SVG Polyline The element can be used to create a line connected by points. To create the points of the polyline line, you can take the x and y values ​​from the properties array and return them as an array of x,y positions.

The points array will return something similar to the following. Each array index contains both an x ​​and y coordinate.

Create an SVG

Create a new item set the viewBox attributes and set the role to presentation.

Creation of the polyline

Create a new item , set the fill to none and add relevant classes to style the stroke. You can also set the strokeWidth using an attribute. By using the points attribute, you can pass the values ​​returned by the points array.

Creation of markers and values

Using the values ​​returned by the property array, you can now add and position svg elements to display the total(s) of the data array.

element is positioned using the x property and y using the cx and cy attributes and given a radius of 12 using the r attribute. You can add your own class names and a value for the strokeWidth to get the look you want.

element is also positioned using the x and y property using the x and y attributes. element accepts children, so add the total property to display it. I added an extra 2.8 to the y to ensure the text is centered vertically in the . You can add your own class names or attributes to achieve the look you want.

Creation of ticks

Ticks are created in a slightly different way, you will notice that the element is wrapped in a .

This is to create a new coordinate system so that when rotation is applied to text, its top/left positions are calculated from the top and left position of the element rather than element .

element doesn’t support x or y attributes, so you’ll use the transform attribute and provide a translation value for the x and y positions. I also subtracted the paddingY and offsetY values ​​to position the tick marks correctly.

Creation of guides

Guides are the last item to add; but rather than iterating over the array of properties, this time you’ll loop through the array of guides.

This is just an empty array and the index is used to provide a key for React. The y coordinate is created the same way as before, where a ratio is created to ensure that the y positions stay within bounds and do not overlap tick marks.

Using the values ​​returned by the property array, it is possible to add any number of different SVG elements to help display different values ​​from different data types.

The x and y properties should be all you need. Although they are a bit tricky to create, they create the boundaries for any new element you want to add to the chart.

Thanks for reading, and if you have any questions, feel free to find me on Twitter: @PaulieScanlon or visit my site paulie.devwhere I have more React/Jamstack tutorials.

Further reading

Band Created with Sketch.