Home Chartjs Reactjs Chartjs with Dynamic Data

Reactjs Chartjs with Dynamic Data

by therichpost
0 comment
Reactjs Chartjs with Dynamic Data

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Chartjs with Dynamic Data.

Reactjs Chartjs
Reactjs Chartjs with Dynamic Data
Reactjs Chartjs with Dynamic Data

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Chartjs with Dynamic Data and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactchart

cd reactchart

2. Now we need to run below commands into our project terminal to get chartjs and related modules into our reactjs application:

npm install --save react-chartjs-2

npm install chart.js --save

npm install axios

npm start //For start project

3. Finally for the main output, we need to add below code into our reactchart/src/App.js file or if you have fresh setup then you can replace reactchart/src/App.js file code with below code:

import React from 'react';
import {Bar} from 'react-chartjs-2';
import axios from 'axios';
class Home extends React.Component {
    constructor(props) {
          this.state = {
            months: [],
        //Get all chart details
        axios.get('http://localhost/chartjs.php').then(res => 
        //Storing users detail in state array object
        this.setState({months: res.data[0]});
        this.setState({sales: res.data[1]});
  render() {
    return (
    <div className="maincontainer">

                    labels: this.state.months,
                    datasets: [
                        label: 'Sales',
                        backgroundColor: 'rgba(75,192,192,1)',
                        borderColor: 'rgba(0,0,0,1)',
                        borderWidth: 2,
                        data: this.state.sales
                    text:'Average Rainfall per month',



export default Home;


4. Guys here is my chartjs.php file data and this file is located inside xampp/htdocs folder::

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
  $months = array("January", "February", "March", "April", "May", "June", "July");
  $sales = array("45", "55", "35", "65", "60", "25", "45");
  echo json_encode(array($months,$sales));

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.