PTB-fe/components/Riwayat/ChartDataBar.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Row, Col, Card, CardHeader, CardBody } from "reactstrap";

import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

class ChartDataBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          data: [
            44, 55, 41, 64, 22, 43, 21, 44, 42, 67, 43, 86, 42, 99, 131, 313,
          ],
        },
      ],
      options: {
        chart: {
          type: "bar",
          height: 430,
        },
        plotOptions: {
          bar: {
            horizontal: true,
            dataLabels: {
              position: "top",
            },
          },
        },
        chart: {
          toolbar: {
            show: true,
            tools: {
              download: false,
            },
          },
        },
        colors: ["#B2B0D2"],
        dataLabels: {
          enabled: true,
          offsetX: -6,
          style: {
            fontSize: "12px",
            colors: ["#333333"],
          },
        },
        stroke: {
          show: true,
          width: 1,
          colors: ["#fff"],
        },
        tooltip: {
          shared: true,
          intersect: false,
        },
        xaxis: {
          categories: [
            "I",
            "II",
            "III",
            "IV",
            "V",
            "VI",
            "VII",
            "VIII",
            "IX",
            "X",
            "XI",
            "XII",
            "XIII",
            "XIV",
            "XV",
            "XVI",
          ],
        },
      },
    };
  }

  render() {
    return (
      <div id="chart">
        <ReactApexChart
          options={this.state.options}
          series={this.state.series}
          type="bar"
          height={430}
        />
      </div>
    );
  }
}
export default ChartDataBar;