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:
