Build a Bar Chart with SVG From Scratch with React
This lesson teaches the fundamental technique for creating your own bar chart data visualization without needing a charting library such as D3 or Chart.js. React components are perfect for composing custom SVG into your own chart. We need only two components to create the example in this lesson. This is a great technique when you have data to display that isn't terribly complicated and you don't want to bloat your bundle size.
Instructor: [0:01] Here I have a set of data that I've create from mockeroo.com and a simple React app. Let's build a bar chart without using a charting library. To start I'll create a bar chart component that will receive our data, and for right now we'll return nulls since we haven't created any of the components that we need to return the chart properly.
[0:20] The components that we need to make this are a Chart, and in our case a Bar component. We'll start with the chart component. The chart is the SVG wrapper of our BarChart. This will take children, height, and width. It will return an SVG with a view box set to , and the width and the height, a width of the width, and a height of the height. It will let any children passed pass through.
[0:49] Inside of our chart we're going to need some bars so we'll create a Bar component. Bar receives all the properties that a rect element needs to receive. The x and y components, the height of the rect and the width of the rect.
[1:04] An astute observer would recognize that we're simply passing all the props directly in as their names to the rect component, and could do something like this which is shorter, but I prefer to do it the other way because then it at least tells us exactly what props we need and what's going in.
[1:22] If you're using types or prop types to tell you what needs to go into a component, you can get away with the short hand and still convey enough information. Now that we have our chart component and our bar component, we're going to compose them together in the BarChart component.
[1:38] In order to do this we're going to first need to define a width of each bar. For right now I'll just make these constants, you could make these props to make this more flexible. We're also going to define a margin between each bar.
[1:53] The width of our chart then becomes the length of our data, multiplied by the width and the margin combined. Because this is a vertical bar chart, the height of our chart becomes the greatest value on the y axis. In this case we're going to take lessons watched and find the greatest one.
[2:14] A simple way to do that is to write a reducer function. This utility function will take an array of values and we'll reduce on those values. If the current is greater than the accumulated value, we want to return the current value, otherwise return the accumulated value.
[2:33] Because we want the greatest value, we actually set the initial value to negative infinity. The ensures that if our whole dataset is negative, we still get the greatest value. We can now use that to get the height, we'll map over our data and return the lessons watched.
[2:50] Now we can start to combine these and actually return something in our react app. We'll use chart as our wrapper, setting the height to our height, and our width to our width. Inside of chart we'll now map over our data and create a Bar for each datum.
[3:07] The key of each Bar can be the datum.name, the x position will be the index times barWidth and barMargin combined. We'll set the y position to for now. The width will be the bar width and the height will be the lessons watched. There you see, that we now have a bar chart.
[3:34] There is one confusing thing about a bar chart, it's upside down. Typically, we'd want these bars to go from the bottom upwards, so how do we do this? In order to do this, we're going to adjust the y position.
[3:49] We're going to shift the items down by the difference between the height of the whole chart, and the height of the lessons watched. That simple changes pushes all our bars down to the bottom of our chart.
[4:02] Now if we want to go through and make it a bit nicer, we can add a prop to our bars for fill, which we can set a default of black to, and then we can update our fill here to make it more appealing. I like the color teal.