How To Add Combo Chart In ReactJs

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

a chart that allows you to choose from the following marker types for each series: line, area, bar, candlestick, and stepped area.
Specify the series type attribute to give each series a default marker type. To specify the specific characteristics of each series, use the series property.

–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 './style.css';
import Chart from 'react-google-charts';

export default function App() {
  const data = [
    [
      'Month',
      'Bolivia',
      'Ecuador',
      'Madagascar',
      'Papua New Guinea',
      'Rwanda',
      'Average',
    ],
    ['2004/05', 165, 938, 522, 998, 450, 614.6],
    ['2005/06', 135, 1120, 599, 1268, 288, 682],
    ['2006/07', 157, 1167, 587, 807, 397, 623],
    ['2007/08', 139, 1110, 615, 968, 215, 609.4],
    ['2008/09', 136, 691, 629, 1026, 366, 569.6],
  ];

  const options = {
    title: 'Monthly Coffee Production by Country',
    vAxis: { title: 'Cups' },
    hAxis: { title: 'Month' },
    seriesType: 'bars',
    series: { 5: { type: 'line' } },
  };
  return (
    <div>
      <Chart
        chartType="ComboChart"
        width="100%"
        height="400px"
        data={data}
        options={options}
      />
    </div>
  );
}

output: