{"id":1499,"date":"2023-05-17T00:00:00","date_gmt":"2023-05-16T22:00:00","guid":{"rendered":"https:\/\/demo.sidekick.be\/itenium\/what-chart-library-to-use-in-react\/"},"modified":"2025-11-28T13:31:43","modified_gmt":"2025-11-28T12:31:43","slug":"what-chart-library-to-use-in-react","status":"publish","type":"post","link":"https:\/\/demo.sidekick.be\/itenium\/blog\/javascript\/what-chart-library-to-use-in-react\/","title":{"rendered":"What chart library to use in React?"},"content":{"rendered":"

Charting Libraries<\/h1>\n

<\/a>recharts\/recharts<\/a>: A Redefined chart library built on d3 <\/a>airbnb\/visx<\/a>: A collection of reusable low-level visualization components. Built on d3 <\/a>plouc\/nivo<\/a>: Nivo provides supercharged React components to easily build dataviz apps, built on d3. <\/a>FormidableLabs\/victory<\/a>: A collection of components for building interactive data visualizations. Built on d3 <\/a>uber\/react-vis<\/a>: A collection of components to render common data visualization charts. Built on d3 <\/a>reactchartjs\/react-chartjs-2<\/a>: React components for Chart.js, the most popular charting library<\/p>\n

Many are built using the very versatile d3.js<\/a> library:<\/p>\n

<\/a>d3\/d3<\/a>: Bring data to life with SVG, Canvas and HTML. \ud83d\udcca\ud83d\udcc8\ud83c\udf89<\/p>\n

If you already used Chart.js<\/code> before, you may want to choose for the react-chartjs-2<\/code> wrapper:
<\/a>chartjs\/Chart.js<\/a>: Simple HTML5 Charts using the canvas tag<\/p>\n

Overview<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Library<\/th>\nPackage size<\/th>\nWeekly downloads<\/th>\nRendering type<\/th>\nPricing<\/th>\nDocumentation<\/th>\nSetup time demo<\/th>\n<\/tr>\n<\/thead>\n
Recharts<\/td>\n4.52 MB<\/td>\n1,278,432<\/td>\nSvg<\/td>\nMIT<\/td>\nVery good<\/td>\n15:10<\/td>\n<\/tr>\n
Visx<\/td>\n440 kB<\/td>\n363,002<\/td>\nSvg<\/td>\nMIT<\/td>\nVery good<\/td>\n28:58<\/td>\n<\/tr>\n
Nivo<\/td>\n2.81 MB<\/td>\n296,292<\/td>\nSvg \/ HTML \/ Canvas<\/td>\nMIT<\/td>\nGood<\/td>\n28:31<\/td>\n<\/tr>\n
Victory<\/td>\n2.95 MB<\/td>\n192,203<\/td>\nSvg<\/td>\nMIT<\/td>\nVery good<\/td>\n11:10<\/td>\n<\/tr>\n
React-vis<\/td>\n1.80 MB<\/td>\n155,768<\/td>\nSvg \/ Canvas<\/td>\nMIT<\/td>\nOk<\/td>\n34:39<\/td>\n<\/tr>\n
React-chartjs-2<\/td>\n4.88 MB<\/td>\n948,010<\/td>\nCanvas<\/td>\nMIT<\/td>\nOk<\/td>\n35:11<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n\n\n\n\n
Library<\/th>\nDependency<\/th>\nCommits<\/th>\nIssues<\/th>\nCharts<\/th>\nStorybook<\/th>\nDocs<\/th>\n<\/tr>\n<\/thead>\n
Recharts<\/td>\nD3<\/td>\n2 days ago (2,254)<\/td>\n470 \/ 2220<\/td>\n11<\/td>\nWIP<\/td>\nExamples<\/a><\/td>\n<\/tr>\n
Visx<\/td>\nD3<\/td>\n1 month ago (3,156)<\/td>\n117 \/ 608<\/td>\n20+<\/td>\nCodeSandbox<\/td>\nSomewhat Interactive<\/a><\/td>\n<\/tr>\n
Nivo<\/td>\nD3<\/td>\n4 days ago (1,992)<\/td>\n81 \/ 1393<\/td>\n20<\/td>\nYES<\/td>\nVery Interactive<\/a><\/td>\n<\/tr>\n
Victory<\/td>\nD3<\/td>\nlast week (8,429)<\/td>\n240 \/ 1491<\/td>\n10<\/td>\nNO<\/td>\nGallery<\/a><\/td>\n<\/tr>\n
React-vis<\/td>\nD3<\/td>\n1 month ago (891)<\/td>\n306 \/ 511<\/td>\n10<\/td>\nYes<\/td>\nGallery<\/a><\/td>\n<\/tr>\n
React-chartjs-2<\/td>\nChart.js<\/td>\n4 months ago (544)<\/td>\n52 \/ 665<\/td>\n15<\/td>\nCodeSandbox<\/td>\nGallery<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Columns:
Commits<\/strong>: Last commit (total commits)
Issues<\/strong>: Open Issues \/ Closed Issues
Charts<\/strong>: Since many libraries offer composable components, the real amount of charts is practically infinite. The amount is an indication of how many are documented! \ud83d\ude03<\/p>\n

Data as of 19\/04\/2023.<\/p>\n

Test Data Structure<\/h1>\n
[\n  { name: \"Bob\", age: 11, },\n  { name: \"Tom\", age: 13, },\n  { name: \"Bruno\", age: 56, },\n  { name: \"Kyoe\", age: 33, },\n  { name: \"Borat\", age: 333, },\n  { name: \"Sasha\", age: 68, },\n  { name: \"Onur\", age: 27 }\n]\n<\/code><\/pre>\n
Installation and Usage<\/h1>\n
How \u201ceasy\u201d is to get a Line Chart<\/strong> working for each library?<\/p>\n
Check out the Github source<\/a> for working examples of these!<\/p>\n
Recharts<\/h2>\n
Time: 15 minutes.<\/p>\n
A smooth experience<\/strong>. Lots of stuff out-of-the-box with little or no configuration (ex: tooltip and legend).<\/p>\n
Example<\/h4>\n
\"Rechart<\/p>\n
Code<\/h4>\n
npm install --save recharts\n<\/code><\/pre>\n
import { useSelector } from \"react-redux\";\nimport { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from \"recharts\";\n\nexport function Recharts() {\n  const persons = useSelector(state => state.persons);\n\n  return (\n    <LineChart\n      width={500}\n      height={300}\n      data={persons}\n      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n    >\n      <CartesianGrid strokeDasharray=\"3 3\" \/>\n      <XAxis dataKey=\"name\" \/>\n      <YAxis \/>\n      <Tooltip \/>\n      <Legend \/>\n      <Line type=\"monotone\" dataKey=\"age\" stroke=\"#8884d8\" \/>\n    <\/LineChart>\n  );\n}\n<\/code><\/pre>\n
Visx<\/h2>\n
Time: 29 minutes<\/p>\n
The x and y axis configuration was done in a bit of a roundabout way, but the main problem and what took the longest time to set correctly was the tooltip. For some reason the library makes the tooltip data object use properties that have no relevance to the data being inserted in the chart. It assumes all data inserted are datum objects whereas in this case they are person objects. The documentation also neglects to mention this in their example.<\/p>\n
Example<\/h4>\n
\"Visx<\/p>\n
Code<\/h4>\n
npm install --save @visx\/xychart\n<\/code><\/pre>\n
import { Axis, Grid, LineSeries, Tooltip, XYChart } from \"@visx\/xychart\";\nimport { useSelector } from \"react-redux\";\n\nexport function Visx() {\n  const persons = useSelector(state => state.persons);\n\n  const accessors = {\n    xAccessor: (d ?: IPerson) => d && d.name,\n    yAccessor: (d ?: IPerson) => d && d.age,\n  };\n\n  return (\n    <XYChart\n      width={500}\n      height={300}\n      xScale={{ type: \"band\" }}\n      yScale={{ type: \"linear\" }}\n    >\n      <Axis orientation=\"bottom\" \/>\n      <Axis orientation=\"left\" \/>\n      <Grid columns={false} numTicks={4} \/>\n      <LineSeries dataKey=\"Line 1\" data={persons} {...accessors} \/>\n      <Tooltip\n        snapTooltipToDatumX\n        snapTooltipToDatumY\n        showVerticalCrosshair\n        showSeriesGlyphs\n        renderTooltip={({ tooltipData, colorScale }) => (\n          <div>\n            <div style={{ color: colorScale?.(tooltipData?.nearestDatum?.key!) }}>\n              {tooltipData?.nearestDatum?.key}\n            <\/div>\n            {accessors.xAccessor(tooltipData?.nearestDatum?.datum)}\n            {\", \"}\n            {accessors.yAccessor(tooltipData?.nearestDatum?.datum)}\n          <\/div>\n        )}\n      \/>\n    <\/XYChart>\n  )\n}\n<\/code><\/pre>\n
Nivo<\/h2>\n
Time: 29 minutes<\/p>\n
My main gripe and time sink with this package was the issue that the data properties needed to be called x and y respectively, so I needed to map my dataset to fit this mold. A simple setting for setting what properties you want to use on which axis would have been nice. Big visual issue however as you can probably tell is that the values don\u2019t exactly show correctly on the x axis.<\/p>\n
Example<\/h4>\n
\"Nivo<\/p>\n
Code<\/h4>\n
npm install --save @nivo\/core @nivo\/line\n<\/code><\/pre>\n
import { Line } from \"@nivo\/line\";\nimport { useSelector } from \"react-redux\";\n\nexport function Nivo() {\n  const persons = useSelector(state => state.persons);\n  const data = persons.map(p => ({ x: p.name, y: p.age }));\n\n  return (\n    <Line\n      width={500}\n      height={300}\n      curve=\"monotoneX\"\n      margin={{ top: 20, right: 20, bottom: 60, left: 80 }}\n      enableSlices=\"x\"\n      data={[{ id: \"persons\", data: data }]}\n      xScale={{ type: \"band\" }}\n      yScale={{ type: \"linear\" }}\n      axisLeft={{ legend: \"linear scale\", legendOffset: 12 }}\n      axisBottom={{ legend: \"linear scale\", legendOffset: -12 }}\n    \/>\n  );\n}\n<\/code><\/pre>\n
Victory<\/h2>\n
Time: 11 minutes<\/p>\n
Usage was relatively easy, but it has the same limitation as the Nivo library because you also need to map your data properties to x and y. Also visually it doesn\u2019t look as pleasing as some of the other charts in this list.<\/p>\n
Example<\/h4>\n
\"Victory<\/p>\n
Code<\/h4>\n
npm install --save victory\n<\/code><\/pre>\n
import { useSelector } from \"react-redux\";\nimport { VictoryChart, VictoryContainer, VictoryLine } from \"victory\";\n\nexport function Victory() {\n  const persons = useSelector(state => state.persons);\n  const data = persons.map(p => ({ x: p.name, y: p.age }));\n\n  return (\n    <>\n      <VictoryChart\n        height={300}\n        width={500}\n        containerComponent={<VictoryContainer responsive={false} \/>}\n      >\n        <VictoryLine data={data} \/>\n      <\/VictoryChart>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
React-vis<\/h2>\n
Time: 35 minutes<\/p>\n
I could not get this chart to render remotely well. The documentation did not really help either in this case. Also I needed to map the data properties to x and y as well again.<\/p>\n
Example<\/h4>\n
\"React-vis<\/p>\n
Code<\/h4>\n
npm install --save react-vis\n<\/code><\/pre>\n
import { useSelector } from \"react-redux\";\nimport { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } from \"react-vis\";\n\nexport function ReactVis() {\n  const persons = useSelector(state => state.persons);\n  const data = persons.map(p => ({ x: p.name, y: p.age }));\n\n  return (\n    <XYPlot width={500} height={300} xType=\"ordinal\">\n      <HorizontalGridLines \/>\n      <XAxis \/>\n      <YAxis \/>\n      <LineSeries color='red' data={data} \/>\n    <\/XYPlot>\n  );\n}\n<\/code><\/pre>\n
React-chartjs-2<\/h2>\n
Time: 35 minutes<\/p>\n
Documentation for this library was kind of limited, especially when it came to creating a line chart. An annoying trait is that you have to split your dataset up in into a labels array for the x axis and data array for the y axis. The end result does look nice however.<\/p>\n
Example<\/h4>\n
\"React-chartjs-2<\/p>\n
Code<\/h4>\n
npm install --save react-chartjs-2 chart.js\n<\/code><\/pre>\n
import { useSelector } from \"react-redux\";\nimport { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from \"chart.js\";\nimport { Line } from \"react-chartjs-2\";\n\nChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);\n\nconst options = {\n  responsive: false,\n  plugins: {\n    legend: {\n      position: \"top\" as const,\n    },\n    title: {\n      display: true,\n      text: \"Chart.js Line Chart\",\n    },\n  },\n};\n\nexport function ReactChartJS2() {\n  const persons = useSelector(state => state.persons);\n  const labels: string[] = persons.map(person => person.name);\n  const ages: number[] = persons.map(person => person.age);\n  const data = {\n    labels,\n    datasets: [{\n      label: \"Dataset 1\",\n      data: ages,\n      borderColor: \"rgb(255, 99, 132)\",\n      backgroundColor: \"rgba(255, 99, 132, 0.5)\",\n    }],\n  };\n\n  return (\n    <Line width={500} height={300} options={options} data={data} \/>\n  );\n}\n<\/code><\/pre>\n
Conclusion<\/h1>\n
Onur: Recharts<\/h2>\n
First time was a charm, the first library Recharts<\/strong> did everything I wanted it to in a clear and convenient manner. It\u2019s the only library where I didn\u2019t really have a complaint. It\u2019s easy to use and has very good documentation.<\/p>\n
Wouter: Nivo<\/h2>\n
Disclaimer: I didn\u2019t actually implement the Line Charts.<\/p>\n
The out of the box experience of the Line Chart was, for me, really nice for Recharts, Nivo<\/strong> and React-ChartJS-2.<\/p>\n
I was really impressed with the documentation of Nivo<\/strong>: a very<\/strong> interactive gallery plus a storybook implementation, just wow. The dev team also seems to be on top of things with 81 open issues and a whopping 1393 closed ones. It\u2019s the only library with a below v1 version though and has not yet gained as much traction (300k weekly downloads) compared to current leaders Recharts (1.5M) and React-chartjs-2 (950k), the latter which coasts of the popularity of Chart.js<\/code> itself.<\/p>\n
Deployed Demo App<\/h2>\n
The create-react-app<\/code> is published at itenium.be<\/a>.<\/p>\n
\"Demo<\/p>\n
Extras<\/h1>\n
Stuff that came into being during the making of this post<\/b><\/p>\n