Create the Mixed Chart in react

Question

I want to create the chart mixed chart with line and bar like the below image.

Answer 1

USE APEXCHARTS. I tried literally everything and apexcharts was the easiest of all the charts for reactjs. LMK if you have anymore questions!

https://apexcharts.com/react-chart-demos/mixed-charts/line-column/#

NOTE: the doc doesn't mention it but you want to import ReactApexCharts from the library like below.

you're gonna need to convert the class states into functional component states in react which shouldn't be too hard if you know basic React. Here's what your inside code should similarly look like:

import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";

export default function Graph(props) {

  const [options, setOptions] = useState({
    chart: {
      height: 350,
      type: "line",
    },
    stroke: {
      width: [0, 4],
    },
    dataLabels: {
      enabled: true,
      enabledOnSeries: [1],
    },
    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
    // xaxis: { DONT NEED THIS, but if you check out the docs they have some useful stuff.
    //   type: 'datetime'
    // },
    yaxis: [
      {
        title: {
          text: "Total Number of Sessions",
        },
      },
      {
        opposite: true,
        title: {
          text: "Total Traffic (Gbps)",
        },
      },
    ],
  });

  const [series, setSeries] = useState([
    {
      name: "Total Number of Sessions",
      type: "column",
      data: [440, 505, 414, 671, 227]//your data goes here
    },
    {
      name: "Total Traffic (Gbps)",
      type: "line",
      data: [40, 50, 41, 67, 22]//your data goes here
    },
  ]);

  return (
    <>
      <ReactApexChart
        options={options}
        series={series}
        type='line'
        height={350}
      />
    </>
  );
}

Answer 2

You firstly, import line from the chartjs-2 library. After add two dataset, and indicate one of them is bar chart. type:'bar' . if you want to add two sides titles, you have to add yAxisID on the datasets. After this, you can put y and y1 axis on the options inside of the scales. Then add titles name in there. Please examine the codes.

Check the result of code:

import React from 'react'
import { Line } from "react-chartjs-2";

function MainChart() {
  return (
    <>
<Line          
          data={{
            labels: ["1","2", "3", "4", "5"],
            datasets: [
              {
                label: "Line value",
                data: [1,2,3,4,5],
                borderColor: `rgba(255,200,100, 0.1)`,
                backgroundColor: `rgba(255,200,100,0.5)`,
                yAxisID: 'y',
              },
              {
                type: 'bar',
                label: "bar value",
                data: [1,2,3,4,5],
                yAxisID: 'y1',
                borderColor:"rgb(120, 80, 0, 0.8)",
                backgroundColor: "rgb(50, 216, 190, 0.3)",
              }
            ],
          }}
          options={{
                scales: {
          y: {
            type: 'linear',
            display: true,
            position: 'left',
            ticks: {
              color: "rgba(0, 0, 0, 1)",
            },
            grid: {
              drawBorder: true,
              drawTicks: true,
              color: "rgba(0, 0, 0, 0.2)",
            },
            title: {
              display: true,
              text: "Line Title",
              font: {
                size: 17
              },
            },
          },
          y1: {
            type: 'linear',
            display: true,
            position: 'right',
            title: {
              display: true,
              text: "Bar Title",
              font: {
                size: 15
              },
            },
           
          },
        
        },
}}
        />

    </>
  )
}

export default MainChart