Material-UI React ChartJS 2

import React from "react";
// javascipt plugin for creating charts
import Chart from "chart.js";
// react plugin used to create charts
import { Line } from "react-chartjs-2";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import Typography from "@material-ui/core/Typography";
// @material-ui/icons components

// core components

import { chartOptions, parseOptions, chartExample1 } from "variables/charts.js";

import componentStyles from "assets/theme/views/admin/dashboard.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();

  if (window.Chart) {
    parseOptions(Chart, chartOptions());
  }

  const cardRootClasses = {
    root: classes.cardRoot,
  }

  const cardHeaderRootClasses = { root: classes.cardHeaderRoot }

  return (
    <>
      <Card
        classes={cardRootClasses}
      >
        <CardHeader
          subheader={
            <Box
              component={Typography}
              variant="h2"
              marginBottom="0!important"
            >
              <Box component="span">
                Sales value
              </Box>
            </Box>
          }
          classes={cardHeaderRootClasses}
        ></CardHeader>
        <CardContent>
          <Box position="relative" height="350px">
            <Line
              data={chartExample1.data1}
              options={chartExample1.options}
              getDatasetAtEvent={(e) => console.log(e)}
            />
          </Box>
        </CardContent>
      </Card>
    </>
  );
}

export default Example;

import React from "react";
// javascipt plugin for creating charts
import Chart from "chart.js";
// react plugin used to create charts
import { Bar } from "react-chartjs-2";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
// @material-ui/icons components

// core components

import { chartOptions, parseOptions, chartExample2 } from "variables/charts.js";

import componentStyles from "assets/theme/views/admin/dashboard.js";

const useStyles = makeStyles(componentStyles);

function Dashboard() {
  const classes = useStyles();

  if (window.Chart) {
    parseOptions(Chart, chartOptions());
  }

  const titleTypographyPropsObj = {
    component: Box,
    variant: "h6",
    letterSpacing: ".0625rem",
    marginBottom: ".25rem!important",
    classes: {
      root: classes.textUppercase,
    },
  }

  const subheaderTypographyPropsObj = {
    component: Box,
    variant: "h2",
    marginBottom: "0!important",
    color: "initial",
  }

  const cardRootClasses = {
    root: classes.cardRoot,
  }

  const cardHeaderRootClasses = { root: classes.cardHeaderRoot }

  return (
    <>
      <Card classes={cardRootClasses}>
        <CardHeader
          subheader="Total orders"
          classes={cardHeaderRootClasses}
          titleTypographyProps={titleTypographyPropsObj}
          subheaderTypographyProps={subheaderTypographyPropsObj}
        ></CardHeader>
        <CardContent>
          <Box position="relative" height="350px">
            <Bar data={chartExample2.data} options={chartExample2.options} />
          </Box>
        </CardContent>
      </Card>
    </>
  );
}

export default Dashboard;

import React from "react";
// javascipt plugin for creating charts
import Chart from "chart.js";
// react plugin used to create charts
import { Line } from "react-chartjs-2";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";
import Typography from "@material-ui/core/Typography";
// @material-ui/icons components

// core components

import { chartOptions, parseOptions, chartExample1 } from "variables/charts.js";

import componentStyles from "assets/theme/views/admin/dashboard.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const theme = useTheme();

  if (window.Chart) {
    parseOptions(Chart, chartOptions());
  }

  const cardRootClasses = {
    root: classes.cardRoot + " " + classes.cardRootBgGradient,
  }

  const cardHeaderRootClasses = { root: classes.cardHeaderRoot }

  return (
    <>
      <Card
        classes={cardRootClasses}
      >
        <CardHeader
          subheader={
            <Box
              component={Typography}
              variant="h2"
              marginBottom="0!important"
            >
              <Box component="span" color={theme.palette.white.main}>
                Sales value
              </Box>
            </Box>
          }
          classes={cardHeaderRootClasses}
        ></CardHeader>
        <CardContent>
          <Box position="relative" height="350px">
            <Line
              data={chartExample1.data1}
              options={chartExample1.options}
              getDatasetAtEvent={(e) => console.log(e)}
            />
          </Box>
        </CardContent>
      </Card>
    </>
  );
}

export default Example;