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.
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.
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.
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.
Create a line chart component
Create a new component called
Render the line chart on a page
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.
- chartWidth: The width of the SVG viewBox.
- chartHeight: The height of the SVG viewBox.
- offsetY: Used to position the tick marks.
- paddingX: The left and right padding around the line graph.
- paddingY: the top and bottom padding around the line graph.
- maxY: the maximum total value of the data array.
- 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.
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.
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
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.
Creation of ticks
Ticks are created in a slightly different way, you will notice that the element
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
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.