7 Best React Chart / Graph Libraries & How to Use Them (With Demo)
Tags: javascript, react, webdev, tutorial
Published: 2020-08-27 14:16:19

This post was originally published at <a href="https://www.devaradise.com/best-react-chart-graph-libraries">https://www.devaradise.com/best-react-chart-graph-libraries</a>

<!-- wp:paragraph -->
<p>Chart or Graph is a common component in a web application used for data visualization. It turns raw data into information that can be used for decision making.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Creating chart components in the web-app from scratch is difficult and very time-consuming. Because of that, <a href="https://www.devaradise.com/how-to-become-front-end-developer">web developers</a> usually create chart components using an external library.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In React, We can also use an external library to create chart components. There are many React chart libraries we can choose.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here, We are going to discuss and review 7 top react chart/graph libraries so you can choose and decide what's best for project.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>Related Tutorials</h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://www.devaradise.com/react-datepicker-tutorial">React Datepicker Tutorial with Top 2 Datepicker Libraries</a></li><li><a href="https://www.devaradise.com/react-tabs-tutorial">React Tabs Tutorial: 3 Ways to Implement</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>We will see what each of these libraries can do, how easy to use &amp; customize it, and how popular it is among developers.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For usage details, I include a code snippet and a working demo example for each library. Each demo example has the same data and case so to make it fair when we compare them. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will visualize sales and leads data from January to June with Line and Bar Chart.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can see the all demo examples in the link below.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="link"><a href="https://www.devaradise.com/lab/react/charts" target="_blank" class="demo-link" rel="noopener">Demo Examples</a></div>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>For the complete codes, you can see <a aria-label="undefined (opens in a new tab)" href="https://github.com/syakirurahman/react-lab/tree/master/src/pages/Charts" target="_blank" rel="noreferrer noopener">here on github</a>. You can also clone the repository that contains demo for other tutorials as well. Don't forget to star it if you find it useful :D.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, let's see and review the 7 react chart libraries below.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>1. Recharts</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2627,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/recharts.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/recharts-1024x445.jpg" alt="Recharts Charts" class="wp-image-2627"/></a></figure>
<!-- /wp:image -->

{% github recharts/recharts no-readme %}

<!-- wp:paragraph -->
<p>Rechart is a simple, easy and highly-customizable open-source chart library for React.js. It supports line chart, bar chart, doughnut, pie chart, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With more than 14k stars on github, Rechart is the most popular chart library built on top of React and D3.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Recharts is well documented and easy to implement. It also has minimal pre-designed charts that suit any design style.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use recharts</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use recharts, first you have to install it on your React project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm install recharts
```
<!-- wp:paragraph -->
<p>After it installed, you can create charts by using recharts components easily as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import { ResponsiveContainer, LineChart, Line, BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts';

const data = [
  { label: 'January', sales: 21, leads: 41 },
  { label: 'February', sales: 35, leads: 79 },
  { label: 'March', sales: 75, leads: 57 },
  { label: 'April', sales: 51, leads: 47 },
  { label: 'May', sales: 41, leads: 63 },
  { label: 'June', sales: 47, leads: 71 }
];

export default function Recharts() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with recharts library</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
              <Tooltip />
              <XAxis dataKey="label" />
              <YAxis />
              <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
              <Legend/>
              <Line type="monotone" dataKey="sales" stroke="#FB8833" />
              <Line type="monotone" dataKey="leads" stroke="#17A8F5" />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
              <XAxis dataKey="label" />
              <YAxis />
              <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
              <Tooltip />
              <Legend/>
              <Bar dataKey="sales" fill="#FB8833" />
              <Bar dataKey="leads" fill="#17A8F5" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>As you see, the data object supplied for the charts is simple (line 5 - 12). It doesn't mix with options object like the other chart libraries. This makes recharts is easier and simple to implement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In recharts, most of the chart elements like legends, grid, and tooltip also have their own component. So, we can just call include the in JSX markup if we want to show them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to see more recharts examples, you can see go to <a href="http://recharts.org/en-US/examples" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener nofollow">the official recharts examples page</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>2. React-chartjs-2 (Chart.js wrapper for React)</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2625,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/react-chartjs-2.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/react-chartjs-2-1024x445.jpg" alt="React-chartjs-2 charts" class="wp-image-2625"/></a></figure>
<!-- /wp:image -->

{% github jerairrest/react-chartjs-2 no-readme %}

<!-- wp:paragraph -->
<p>react-chartjs-2 is just a wrapper for <a aria-label="undefined (opens in a new tab)" href="https://www.chartjs.org/" target="_blank" rel="noreferrer noopener nofollow">Chart.js</a>, the most popular javascript library for chart and graph with 50k+ stars on Github. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Chart.js is a great library to create highly customizable charts. It has many kinds of charts and a lot of options to customize it. It supports line chart, bar chart, doughnut &amp; pie, scatter, radar, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With react-chartjs-2, Implementing Chart.js in React becomes easier. React-chartjs-2 creates ready-to-use React chart components that can be used in JSX.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use chart.js in React</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use chart.js, you have to install chart.js and react-chartjs-2 as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm install --save react-chartjs-2 chart.js
```
<!-- wp:paragraph -->
<p>After that, you can import the chart components you want to implement, and use them. You can see the codes below.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import { Line, Bar } from 'react-chartjs-2';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'Sales',
      data: [21, 35, 75, 51, 41, 47],
      fill: false, // for Line chart
      backgroundColor: '#FB8833',
      borderColor: '#FB8833' // for Line chart
    },
    {
      label: 'Leads',
      data: [41, 79, 57, 47, 63, 71],
      fill: false, // for Line chart
      backgroundColor: '#17A8F5',
      borderColor: '#17A8F5' // for Line chart
    }
  ]
};

const options = {
  scales: {
      yAxes: [{
          ticks: {
              beginAtZero: true
          }
      }]
  }
}

export default function ReactChartjs2() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Chart.js charts wrapped with react-chartjs-2</h2>
      </div>
      
      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <Line data={data} options={options}/>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <Bar data={data} options={options}/>
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>With chart.js, the data object supplied for the chart has some properties to customize it, like <code>fill</code>, <code>backgroundColor</code> and <code>borderColor</code>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The options object is used to set any configuration that not related to the data like chart layout, legend, animations, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are a lot of options to customize your chart with Chart.js. You can see the <a aria-label="undefined (opens in a new tab)" href="https://www.chartjs.org/docs" target="_blank" rel="noreferrer noopener">Chart.js official docs</a> for that.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>3. Nivo</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2623,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/nivo.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/nivo-1024x445.jpg" alt="Nivo charts" class="wp-image-2623"/></a></figure>
<!-- /wp:image -->

{% github plouc/nivo no-readme %}

<!-- wp:paragraph -->
<p>Nivo is another best data visualization library for React, built on top of D3. It is highly customizable and has a lot of data visualization components with <a aria-label="undefined (opens in a new tab)" href="https://nivo.rocks/" target="_blank" rel="noreferrer noopener nofollow">very good documentation</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It supports line chart, bar chart, bubble, heatmap, pie, radar and many more with the options to create them using SVG, Canvas and HTTP API.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nivo also provides server side rendering ability and fully declarative charts. </p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use nivo</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Nivo is modular. So, you don't have to install all packages on your project. Just install the components you want to add using yarn. You can find all the component list <a aria-label="undefined (opens in a new tab)" href="https://nivo.rocks/components" target="_blank" rel="noreferrer noopener nofollow">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
yarn add @nivo/bar @nivo/line
```
<!-- wp:paragraph -->
<p>After that, you can create nivo charts as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import { ResponsiveLine } from '@nivo/line'
import { ResponsiveBar } from '@nivo/bar'

const data = [
  {
    id: 'sales',
    color: '#FB8833',
    data: [
      { x: "January", y: 21 },
      { x: "February", y: 35 },
      { x: "March", y: 75 },
      { x: "April", y: 51 },
      { x: "May", y: 41 },
      { x: "June", y: 47 }
    ]
  },
  {
    id: 'leads',
    color: '#17A8F5',
    data: [
      { x: "January", y: 41 },
      { x: "February", y: 79 },
      { x: "March", y: 57 },
      { x: "April", y: 47 },
      { x: "May", y: 63 },
      { x: "June", y: 71 }
    ]
  }
];

const databar = [
  { label: 'January', sales: 21, leads: 41 },
  { label: 'February', sales: 35, leads: 79 },
  { label: 'March', sales: 75, leads: 57 },
  { label: 'April', sales: 51, leads: 47 },
  { label: 'May', sales: 41, leads: 63 },
  { label: 'June', sales: 47, leads: 71 }
]

export default function Nivo() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with nivo library</h2>
      </div>
      
      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content" style={{height:'300px'}}>
          {/* 
          // make sure parent container have a defined height when using
          // responsive component, otherwise height will be 0 and
          // no chart will be rendered. */}
          <ResponsiveLine
            data={data}
            margin={{ top: 30, right: 60, bottom: 60, left: 30 }}
            axisBottom={{
              orient: 'bottom',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'Month',
              legendOffset: 36,
              legendPosition: 'middle'
            }}
            colors={d => d.color}
            pointSize={7}
            pointBorderWidth={2}
            pointLabelYOffset={-12}
            useMesh={true}
            legends={[
              {
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 100,
                translateY: 0,
                itemsSpacing: 0,
                itemDirection: 'left-to-right',
                itemWidth: 80,
                itemHeight: 20,
                itemOpacity: 0.75,
                symbolSize: 12,
                symbolShape: 'circle',
                symbolBorderColor: 'rgba(0, 0, 0, .5)',
              }
            ]}
          />
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content" style={{height:'300px'}}>
          {/* 
          // make sure parent container have a defined height when using
          // responsive component, otherwise height will be 0 and
          // no chart will be rendered. */}
          <ResponsiveBar
            data={databar}
            keys={[ 'sales', 'leads' ]}
            indexBy="label"
            groupMode="grouped"
            margin={{ top: 30, right: 130, bottom: 50, left: 30 }}
            padding={0.3}
            colors={['#FB8833', '#17A8F5']}
            legends={[
              {
                dataFrom: 'keys',
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 120,
                translateY: 0,
                itemsSpacing: 2,
                itemWidth: 100,
                itemHeight: 20,
                itemDirection: 'left-to-right',
                itemOpacity: 0.85,
                symbolSize: 20,
              }
            ]}
            animate={true}
          />
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>The data object and options for each chart type are different. Nivo components has also many props for customization.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the first look, that may seem intimidating. But, with Nivo modularity and very good documentation, you don't have to worry about all of those options.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>4. Hightcharts-react (Highcharts wrapper for React)</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2634,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/highcharts-react.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/highcharts-react-1024x460.jpg" alt="Highcharts React" class="wp-image-2634"/></a></figure>
<!-- /wp:image -->

{% github highcharts/highcharts-react no-readme %}

<!-- wp:paragraph -->
<p>Highchart is a popular javascript library for charts with 9k+ stars on Github. To make it easily implemented in React, the developer create highcharts-react as a react wrapper for highcharts.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Highcharts supports various line charts, time series, area chart, column/bar chart, pie chart, scatter, bubble, and many more. You can see the complete <a href="https://www.highcharts.com/demo" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener nofollow">demo here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use highcharts</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use highcharts, first, you have to install highcharts and highcharts-react-official as wrapper on your React project using npm.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm install highcharts highcharts-react-official
```
<!-- wp:paragraph -->
<p>After that, you can create the charts as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const LineChartOptions = {
  title: {
    text: 'Line chart'
  },
  xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5'],
  series: [
    {
      name: 'Sales',
      data: [21, 35, 75, 51, 41, 47]
    },
    {
      name: 'Leads',
      data: [41, 79, 57, 47, 63, 71]
    }
  ],
  credits: {
    enabled: false
  }
}

const BarChartOptions = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Bar Chart'
  },
  xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5'],
  series: [
    {
      name: 'Sales',
      data: [21, 35, 75, 51, 41, 47]
    },
    {
      name: 'Leads',
      data: [41, 79, 57, 47, 63, 71]
    }
  ],
  credits: {
    enabled: false
  }
}

export default function HighchartsReactWrapper() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Hightcharts charts with highcharts-react</h2>
      </div>
      
      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <HighchartsReact
            highcharts={Highcharts}
            options={LineChartOptions}
          />
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <HighchartsReact
            highcharts={Highcharts}
            options={BarChartOptions}
          />
        </div>
      </div>

    </div>
  )
}

```
<!-- wp:paragraph -->
<p>As you see, you should create a mixed data and option object for each chart component. The data object structure are quite readable.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To customize it further, you can see <a href="https://www.highcharts.com/docs" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener nofollow">the official documentation </a>to add more options.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>5. React-apexcharts (ApexCharts wrapper for React)</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2624,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/react-apexcharts.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/react-apexcharts-1024x445.jpg" alt="React-apexcharts charts" class="wp-image-2624"/></a></figure>
<!-- /wp:image -->

{% github apexcharts/react-apexcharts no-readme %}

<!-- wp:paragraph -->
<p>Like Chart.js and Highchart, Apexcharts is also a popular javascript chart library that can be implemented to React with a wrapper. Apexcharts supports line, bar/column, area, timeline, mixed, candlestick, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Among the other 6 chart libraries, Apexcharts is the most feature-rich and beautifully designed chart library. With minimum options, you can have a chart with zoom in/out feature, area selection, and import options to SVG, PNG, and CSV format.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, it comes with a cost. Apexcharts has slower rendering charts compared to other chart libraries here.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use apexcharts</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use Apexcharts, first, you have to install it on your React project, as well as its wrapper.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm install react-apexcharts apexcharts
```
<!-- wp:paragraph -->
<p>Then, you can create chart components as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import Chart from 'react-apexcharts'

const options = {
  chart: {
    id: 'apexchart-example'
  },
  xaxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5']
}
  
const series = [
  {
    name: 'Sales',
    data: [21, 35, 75, 51, 41, 47]
  },
  {
    name: 'Leads',
    data: [41, 79, 57, 47, 63, 71]
  }
]

export default function ReactApexcharts() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Apexcharts.js charts wrapped with react-apexcharts</h2>
      </div>      

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <Chart options={options} series={series} type="line"/>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <Chart options={options} series={series} type="bar" />
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>You only need to import a Chart component and call it in JSX with some props.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The data and options object are similar with highcharts. For more details of the customization, you can go to <a href="https://apexcharts.com/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener nofollow">the official documentation</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>6. React-vis</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2626,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/react-vis.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/react-vis-1024x445.jpg" alt="React-vis Charts" class="wp-image-2626"/></a></figure>
<!-- /wp:image -->

{% github uber/react-vis no-readme %}

<!-- wp:paragraph -->
<p>React-vis is a collection of react components to render common data visualization charts. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It supports&nbsp;line/area/bar charts,&nbsp;heat maps,&nbsp;scatterplots,&nbsp;contour plots,&nbsp;hexagon heatmaps,&nbsp;pie and donut charts,&nbsp;sunbursts,&nbsp;radar charts,&nbsp;parallel coordinates, and&nbsp;treemaps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>React-vis is great if you want to create your own designed chart.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use React-vis</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use react-vis, first you have to install it on your React project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm install react-vis --save
```
<!-- wp:paragraph -->
<p>After it installed, you can create charts as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import '../../../../node_modules/react-vis/dist/style.css';
import { XYPlot, XAxis, YAxis, HorizontalGridLines, VerticalGridLines, LineMarkSeries, VerticalBarSeries } from 'react-vis';

const data = {
  sales : [
    { x: "January", y: 21 },
    { x: "February", y: 35 },
    { x: "March", y: 75 },
    { x: "April", y: 51 },
    { x: "May", y: 41 },
    { x: "June", y: 47 }
  ],
  leads : [
    { x: "January", y: 41 },
    { x: "February", y: 79 },
    { x: "March", y: 57 },
    { x: "April", y: 47 },
    { x: "May", y: 63 },
    { x: "June", y: 71 }
  ]
}

export default function ReactVis() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with react-vis library</h2>
      </div>
      
      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <XYPlot 
            xType="ordinal"
            width={500}
            height={300}>
            <XAxis />
            <YAxis />
            <VerticalGridLines />
            <HorizontalGridLines />
            <LineMarkSeries
              data={data.sales}
              color="#FB8833"
              />
            <LineMarkSeries
              data={data.leads}
              color="#17A8F5"
              />
          </XYPlot>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <XYPlot 
            xType="ordinal"
            width={500}
            height={300}>
            <XAxis />
            <YAxis />
            <VerticalGridLines />
            <HorizontalGridLines />
            <VerticalBarSeries
              data={data.sales}
              color="#FB8833"
              />
            <VerticalBarSeries
              data={data.leads}
              color="#17A8F5"
              />
          </XYPlot>
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>As you can see, it's quite simple to create charts with react-vis. The data supplied for the chart is also simple.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Similar to rechart, react-vis also has smaller collection of components for chart element like Grid, Line, XAxis, YAxis, etc that can be used in JSX markup.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As for the chart style/design, you should manually import the react-vis css file first. You can also add your own style to customize your chart components.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>7. Victory</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2628,"sizeSlug":"large","linkDestination":"media"} -->
<figure class="wp-block-image size-large"><a href="https://www.devaradise.com/wp-content/uploads/2020/08/victory.jpg"><img src="https://www.devaradise.com/wp-content/uploads/2020/08/victory-1024x481.jpg" alt="Victory Charts" class="wp-image-2628"/></a></figure>
<!-- /wp:image -->

{% github FormidableLabs/victory no-readme %}

<!-- wp:paragraph -->
<p>Victory is a set of modular charting components for React and React Native. It makes it easy to get started without sacrificing flexibility.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Victory supports various chart components like line, bar, area, pie, candlestick, scatter, and many more.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h4>How to use victory</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To use victory, first you have to install it on your React project.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
```
npm i --save victory
```
<!-- wp:paragraph -->
<p>After it installed, you can create the victory charts as follows.</p>
<!-- /wp:paragraph -->

<!-- wp:code {"lineNumbers":true} -->
```javascript
import React from 'react'
import { VictoryChart, VictoryLine, VictoryBar } from 'victory';

const sales = {
  style: {
    data: { 
      stroke: "#FB8833", // for Line chart
    },
    parent: { border: "1px solid #ccc"}
  },
  style2: {
    data: { 
      fill: "#FB8833" // for Bar chart
    },
    parent: { border: "1px solid #ccc"}
  },
  data: [
    { x: "January", y: 21 },
    { x: "February", y: 35 },
    { x: "March", y: 75 },
    { x: "April", y: 51 },
    { x: "May", y: 41 },
    { x: "June", y: 47 }
  ]
};

const leads = {
  style: {
    data: { 
      stroke: "#17A8F5", // for Line chart
    },
    parent: { border: "1px solid #ccc"}
  },
  style2: {
    data: { 
      fill: "#17A8F5" // for Bar chart
    },
    parent: { border: "1px solid #ccc"}
  },
  data: [
    { x: "January", y: 41 },
    { x: "February", y: 79 },
    { x: "March", y: 57 },
    { x: "April", y: 47 },
    { x: "May", y: 63 },
    { x: "June", y: 71 }
  ]
};
  

export default function Victory() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with victory library</h2>
      </div>
      
      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <VictoryChart padding={30}>
            <VictoryLine
              style={sales.style}
              data={sales.data}
            />
            <VictoryLine
              style={leads.style}
              data={leads.data}
            />
          </VictoryChart>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <VictoryChart padding={30}>
            <VictoryBar
              style={leads.style2}
              data={leads.data}
            />
            <VictoryBar 
              style={sales.style2}
              data={sales.data}
            />
          </VictoryChart>
        </div>
      </div>

    </div>
  )
}
```
<!-- wp:paragraph -->
<p>Initializing a chart component with victory is simple. But, it doesn't come with a predefined chart element like legend, tooltip, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, if you want to add those elements to your chart, you should add and design it manually. You can see <a aria-label="undefined (opens in a new tab)" href="https://formidable.com/open-source/victory/docs" target="_blank" rel="noreferrer noopener nofollow">the official documentation</a> for that.</p>
<!-- /wp:paragraph -->

<!-- wp:heading  -->
<h3>Conclusions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Among the 7 libraries above, I recommend the first 5 libraries if you want complete features and easy-to-use charts. But, if you want to create a very customized chart, and design it on your own, you can try the last 2 libraries.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After reading this post, i hope you can now choose and decide what chart library is best for your React project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you find this post useful, feel free to share it with your developer friends. If you have any questions, or maybe a suggestion, let me know in the comment section below!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->