react chartjs

1npm i react-chartjs-2

1npm install --save react-chartjs-2 chart.js

1npm install --save react-chartjs-2 chart.js

1
2import React, { Component } from "react";
3import Chart from "react-apexcharts";
4
5class App extends Component {
6  constructor(props) {
7    super(props);
8
9    this.state = {
10      options: {
11        chart: {
12          id: "basic-bar"
13        },
14        xaxis: {
15          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
16        }
17      },
18      series: [
19        {
20          name: "series-1",
21          data: [30, 40, 45, 50, 49, 60, 70, 91]
22        }
23      ]
24    };
25  }
26
27  render() {
28    return (
29      <div className="app">
30        <div className="row">
31          <div className="mixed-chart">
32            <Chart
33              options={this.state.options}
34              series={this.state.series}
35              type="bar"
36              width="500"
37            />
38          </div>
39        </div>
40      </div>
41    );
42  }
43}
44
45export default App;
46
47

1import React, { Component } from 'react';
2import './App.css';
3import axios from 'axios'
4import Chart from './components/Chart';
5
6class App extends Component {
7  constructor(){
8    super();
9    this.state = {
10      chartData:{}
11    }
12  }
13
14  componentDidMount() {
15    this.getChartData();
16  }
17
18  getChartData() {
19    axios.get("http://www.json-generator.com/api/json/get/coXIyroYAy?indent=2").then(res => {
20        const coin = res.data;
21        let labels = [];
22        let data = [];
23        coin.forEach(element => {
24        labels.push(element.labels);
25        data.push(element.data);
26
27          });
28
29       console.log(coin)
30        this.setState({
31          chartData: {
32            labels:labels,
33            datasets: [
34              {
35                label: "Population",
36                data: data,
37                backgroundColor: [
38                  "rgba(255, 99, 132, 0.6)",
39                  "rgba(54, 162, 235, 0.6)",
40                  "rgba(255, 99, 132, 0.6)"
41                ],
42              }
43            ]
44          }
45        });
46      });
47    }
48
49  render(){
50
51        return (
52          <div className="App">
53          {Object.keys(this.state.chartData).length &&
54            <Chart
55              chartData={this.state.chartData}
56              location="Massachusetts"
57              legendPosition="bottom"
58            />
59          }
60          </div>
61        );
62
63    }     
64}
65
66export default App;
67

1//in terminal: 
2yarn add chart.js // or npm install chart.js if you use npm
3//html file: 
4<canvas id="my-chart" width="400" height="400"></canvas>
5//js file
6import Chart from 'chart.js'
7
8const ctx = document.getElementById('my-chart').getContext('2d');
9const chart = new Chart(ctx, {
10  // The type of chart we want to create
11  type: 'bar',
12
13  // The data for our dataset
14  data: {
15    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
16    datasets: [{
17      label: 'My First dataset',
18      backgroundColor: 'rgb(255, 99, 132)',
19      borderColor: 'rgb(255, 99, 132)',
20      data: [0, 10, 5, 2, 20, 30, 45]
21    }]
22  },
23
24  // Configuration options go here
25  options: {}
26  });
27};