✨ Try our new interactive demo
Google Charts has a wide variety of charts and operates with both SVG and HTML5 technology to be highly compatible. It is free to use and is a great library to launch charting. It doesn't offer as much customizability as some other charting libraries, but is a great solution.
React is a popular JavaScript library for building user interfaces, particularly single-page applications where dynamic content needs to be updated without reloading the page. Developed by Facebook (now Meta Platforms), React has grown in popularity due to its simplicity, efficiency, and scalability. It allows developers to build large web applications that can change data without reloading the page, offering a responsive and fluid user experience. React has a virtual DOM for faster manipulation, a component based architecture, and a great community for support. It is efficient, flexible, and widely used in the market.
Integrating Google Charts into a React application involves using the react-google-charts library. This example demonstrates how to create a simple Pie Chart. First, ensure you have the react-google-charts package installed in your project:
npm install react-google-charts
Next, we create a functional component named PieChartComponent using React. In this component, we'll render a Pie Chart using data and options to customize the look of the chart.
import React from 'react';
import { Chart } from "react-google-charts";
const PieChartComponent = () => {
const data = [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
];
const options = {
title: 'My Daily Activities',
is3D: true,
};
return (
<div>
<h2>Pie Chart Example</h2>
<Chart
chartType="PieChart"
width="100%"
height="400px"
data={data}
options={options}
/>
</div>
);
};
export default PieChartComponent;
Finally, include the PieChartComponent in your application. For instance, you can render it inside the App component:
import React from 'react';
import ReactDOM from 'react-dom';
import PieChartComponent from './PieChartComponent';
function App() {
return (
<div className="App">
<PieChartComponent />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
This setup will render a 3D Pie Chart based on the provided data and options, showcasing the versatility of Google Charts within a React application. Customize the data and options as needed to fit your specific requirements.
Looking for the fastest, easiest way to make responsive next-level charts on your website? Reach out to Explo, the market leader in creating responsive charts. With Explo's Report Builder and Editable Sections offerings, you can easily drag-and-drop charts and custom reporting in a matter of minutes, all with just SQL and no-code tools. No need to learn and configure charts, use our highly customizable solution instead.
