There are several **npm** packages that allow charts to be created in React; **chart.js** is one of the packages which makes the creation of charts and graphs ​very easy.

The React wrapper for `chart.js` is `react-chartjs-2`; it makes things simpler in React, however, it doesn't support all the customization features that come with Chart.js. 

Both these packages need to be installed using **npm** before they can be used.

Types of charts:
1. Bar charts
2. Line graph
3. Pie charts

<br> 

# Examples

Let's look at a some types of charts that can be created using this handy library:

## 1. Bar chart

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
import {Bar} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: 'rgba(75,192,192,1)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 2,
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

## Explanation
- The `state` variable contains all the data and styling properties of the bar graph. The `labels` keyword assigns names to each bar, and the `dataset` sub-set contains information such as bar color, border width, ​and height of the bar. 
- The **Bar** component is rendered using `<Bar />` inside the React `App` component. The defined state is assigned to the bar component on **line 22**. The options property allows further miscellaneous styling, such as the position of the heading and the chart legend. 

<br> 

## 2. Line graph

The syntax is similar to the one used for a bar chart. A new property, `lineTension`, is used here; it controls the curvature of the line joining the points.

import React from 'react';
import {Line} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      fill: false,
      lineTension: 0.5,
      backgroundColor: 'rgba(75,192,192,1)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 2,
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Line
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}


## 2. Pie charts

In addition to the conventional pie chart, `chart.js` also has a ***Doughnut*** graph which stylizes the pie chart differently. Both of these charts are represented below: 

import React from 'react';
import {Pie, Doughnut} from 'react-chartjs-2';

const state = {
  labels: ['January', 'February', 'March',
           'April', 'May'],
  datasets: [
    {
      label: 'Rainfall',
      backgroundColor: [
        '#B21F00',
        '#C9DE00',
        '#2FDE00',
        '#00A6B4',
        '#6800B4'
      ],
      hoverBackgroundColor: [
      '#501800',
      '#4B5000',
      '#175000',
      '#003350',
      '#35014F'
      ],
      data: [65, 59, 80, 81, 56]
    }
  ]
}

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Pie
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />

        <Doughnut
          data={state}
          options={{
            title:{
              display:true,
              text:'Average Rainfall per month',
              fontSize:20
            },
            legend:{
              display:true,
              position:'right'
            }
          }}
        />
      </div>
    );
  }
}

### Additional examples
More types of supported graphs and charts, along with the details about their properties,​ can be found on `chart.js`'s [github](https://github.com/jerairrest/react-chartjs-2).

How to use chart.js to create charts in React

There are several npm packages that allow charts to be created in React; chart.js is one of the packages which makes the creation of charts and graphs ​very easy. The React wrapper for chart.js is react-chartjs-2; it makes things simpler in React, however, it doesn t support all the customization features that come with Chart.js. Both these packages need to be installed using npm before they can be used. Types of charts:  Bar charts Line graph Pie charts    Examples Let s look at a some types of charts that can be created using this handy library: 1. Bar chart 