Back ArrowExplore all kits

Bar Charts using React-Charts in ReactJS

share link

by Abdul Rawoof A R dot icon Updated: Mar 27, 2023

technology logo
technology logo

Solution Kit Solution Kit  

Bar graphs are pictorial representations of data. They display numerical or categorical data. The data in bar charts are represented as vertical or horizontal bars, where the bar's length depicts the measure of data. Bar charts are mostly used in Sales Management, Inventory Management or to compare frequencies, etc. We can use an array or a list of data items as the source for creating a bar chart.  


For creating a bar chart in React, we use React-charts. They include: 

  • Chart 
  • Series Type Components 
  • Curve Functions 
  • Position Constants 
  • Grouping Constants 


A standard and highly adaptable data model proposed on arrays of series and arrays of datums is used by React Charts. To materialize this structure, you may directly use data accessors or the model defaults. 

  • Series: It is a collection of related data points 
  • Datums: Datums is a set of react components used for display and input of attributes 


For more information about bar charts using react-charts in ReactJS, refer to the code given below. 

Fig : Preview of the output that you will get on running this code from your IDE.

Code

In this solution we are using React, moment and React charts libraries.

How to change the width of the bar in bar chart in react-charts?

JavaScriptdotLines of Code : 61dotLicense : Strong Copyleft (CC BY-SA 4.0)

Dependent Libraries : 
import moment from "moment";
import React from "react";
import { Chart } from "react-charts";

import "./styles.css";

export default function App() {
  const dataone = React.useMemo(
    () => [
      {
        label: "Event",
        data: [
          [moment(2010, "YYYY"), null],
          [moment(2011, "YYYY"), 3],
          [moment(2012, "YYYY"), 2],
          [moment(2013, "YYYY"), 1],
          [moment(2015, "YYYY"), 3],
          [moment(2016, "YYYY"), null]
        ]
      }
    ],
    []
  );
  const options = {
    scales: {
      xAxes: [
        {
          barPercentage: 0.4
        }
      ]
    }
  };
  const series = { type: "bar" };
  const axes = React.useMemo(
    () => [
      { primary: true, type: "time", position: "bottom" },
      { type: "linear", position: "left" }
    ],
    []
  );

  return (
    <>
      <div
        style={{
          width: "600px",
          height: "300px"
        }}
      >
        <Chart
          data={dataone}
          options={options}
          axes={axes}
          series={series}
          tooltip
        />
      </div>
    </>
  );
}

Instructions

Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Install npm i moment and npm i react-charts --force.
  5. Open the folder in IDE.
  6. Copy the code using "copy" button above and paste it in app.js file.
  7. Command or remove the import statement of styles file.
  8. Open the terminal from IDE.
  9. npm start to run the file.


You can also refer this url 'DEMO' for getting the above output.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.


I found this code snippet by searching for 'Bar chart using react-charts in ReactJs' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Visual Studio Code 1.73.1.
  2. The solution is tested on node v18.12.1 and npm v8.19.2.
  3. React version-18.2.0.
  4. Moment version-current.
  5. React-charts version-0.8.0.


Using this solution, we are able to create bar chart using react charts in reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create bar chart using react charts in reactjs.

Dependent Library

reactby facebook

JavaScript doticonstar image 209050 doticonVersion:v18.2.0doticon
License: Permissive (MIT)

The library for web and native user interfaces

Support
    Quality
      Security
        License
          Reuse

            reactby facebook

            JavaScript doticon star image 209050 doticonVersion:v18.2.0doticon License: Permissive (MIT)

            The library for web and native user interfaces
            Support
              Quality
                Security
                  License
                    Reuse

                      momentby moment

                      JavaScript doticonstar image 47416 doticonVersion:Currentdoticon
                      License: Permissive (MIT)

                      Parse, validate, manipulate, and display dates in javascript.

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                momentby moment

                                JavaScript doticon star image 47416 doticonVersion:Currentdoticon License: Permissive (MIT)

                                Parse, validate, manipulate, and display dates in javascript.
                                Support
                                  Quality
                                    Security
                                      License
                                        Reuse

                                          react-chartjsby reactjs

                                          JavaScript doticonstar image 2952 doticonVersion:v0.8.0doticon
                                          License: Permissive (MIT)

                                          common react charting components using chart.js

                                          Support
                                            Quality
                                              Security
                                                License
                                                  Reuse

                                                    react-chartjsby reactjs

                                                    JavaScript doticon star image 2952 doticonVersion:v0.8.0doticon License: Permissive (MIT)

                                                    common react charting components using chart.js
                                                    Support
                                                      Quality
                                                        Security
                                                          License
                                                            Reuse

                                                              You can also search for any dependent libraries on kandi like 'react', 'moment' and 'react-charts'.

                                                              Support

                                                              1. For any support on kandi solution kits, please use the chat
                                                              2. For further learning resources, visit the Open Weaver Community learning page.


                                                              See similar Kits and Libraries

                                                              Open Weaver – Develop Applications Faster with Open Source

                                                              kandi

                                                              Community and Support

                                                              Company

                                                              Follow

                                                              • © 2023 Open Weaver Inc.