text: import React from "react";
  import styled, { withTheme } from "styled-components/macro";
  
  import { CardContent, Card as MuiCard, Typography } from "@material-ui/core";
  import { spacing } from "@material-ui/system";
  
  import { Bar } from "react-chartjs-2";
  
  const Card = styled(MuiCard)(spacing);
  
  const Spacer = styled.div(spacing);
  
  const ChartWrapper = styled.div`
    height: 300px;
    width: 100%;
  `;
  
  function BarChart({ theme }) {
    const data = {
      labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      datasets: [
        {
          label: "Last year",
          backgroundColor: theme.palette.secondary.main,
          borderColor: theme.palette.secondary.main,
          hoverBackgroundColor: theme.palette.secondary.main,
          hoverBorderColor: theme.palette.secondary.main,
          data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
          barPercentage: 0.75,
          categoryPercentage: 0.5,
        },
        {
          label: "This year",
          backgroundColor: theme.palette.grey[300],
          borderColor: theme.palette.grey[300],
          hoverBackgroundColor: theme.palette.grey[300],
          hoverBorderColor: theme.palette.grey[300],
          data: [69, 66, 24, 48, 52, 51, 44, 53, 62, 79, 51, 68],
          barPercentage: 0.75,
          categoryPercentage: 0.5,
        },
      ],
    };
  
    const options = {
      maintainAspectRatio: false,
      legend: {
        display: false,
      },
      scales: {
        yAxes: [
          {
            gridLines: {
              display: false,
            },
            stacked: false,
            ticks: {
              stepSize: 20,
            },
          },
        ],
        xAxes: [
          {
            stacked: false,
            gridLines: {
              color: "transparent",
            },
          },
        ],
      },
    };
  
    return (
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            Bar Chart
          </Typography>
  
          <Spacer mb={6} />
  
          <ChartWrapper>
            <Bar data={data} options={options} />
          </ChartWrapper>
        </CardContent>
      </Card>
    );
  }
  
  export default withTheme(BarChart);
  