How To Add PieChart In ReactJS

In this article, we will learn how to add a PieChart using google charts.

Pie charts typically start with the first slice’s left edge pointing straight up.

–First of all, we have to create a react application.

-Then import the below package into your project.

npm install --save react-google-charts

-Now open your app.js file and add the below code:

import React from 'react'
import { Chart } from "react-google-charts";
function App() {

  var coverData = ([
    ['Language', 'Speakers (in millions)'],
    ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
    ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
    ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
    ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
    ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
    ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
    ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
  ]);


  var coverOption = {
    width: 260,
    title: 'Indian Language Use',
    legend: 'none',
    pieSliceText: 'label',
    slices: {  4: {offset: 0.2},
              12: {offset: 0.3},
              14: {offset: 0.4},
              15: {offset: 0.5},
    },

  };

  return (
    <>
    <h1>
    PieChart
    </h1>
        <Chart className='abc' chartType="PieChart" width="100%" height="305px" data={coverData} options={coverOption} />
    </>

  )
}

export default App

Exploding a slice:

With the offset attribute of the slices option, you may distinguish pie slices from the remainder of the chart.

Create a slices object, give the relevant slice number an offset between 0 and 1, and then use that object to split the slices. Slices 4 (Gujarati), 12 (Marathi), 14 (Oriya), and 15 (Punjabi) have gradually bigger offsets assigned to them in the table.

OUTPUT:

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories