Highcharts

gistfile1.txt

import React from "react";
// Import Highcharts
import Highcharts from "highcharts/highstock";
import HighchartsReact from "highcharts-react-official";
import highchartsExporting from "highcharts/modules/exporting";
import highchartsExportData from "highcharts/modules/export-data";
import highchartsAccessibility from "highcharts/modules/accessibility";
import {defaultConfig} from "@ignite-analytics/charts"

highchartsExporting(Highcharts);
highchartsExportData(Highcharts);
highchartsAccessibility(Highcharts);

const Chart = () => {
    let options: Highcharts.Options = {
        chart: {
          events: {
            render: function () {
              // const btn = document.querySelector(
              //   ".highcharts-a11y-proxy-button.highcharts-no-tooltip"
              // ) as HTMLElement;
              // if (btn && !btn.title)
              //   btn.title =
              //     Highcharts.getOptions().lang?.contextButtonTitle ??
              //     "Chart context menu";
            }
          }
        },
        exporting: {
          buttons: {
            contextButton: {
              symbol: "menuball",
              y: -2,
              menuItems: [
                "printChart",
                "separator",
                "downloadJPEG",
                "downloadPDF",
                "downloadCSV"
              ]
            }
          }
        },
        xAxis: {
          gridLineWidth: 0,
          categories: ['In total:', 'Expire next year:', 'Expire next 3 months', 'Expire next month', 'Expired']
        },
        yAxis: {
          gridLineWidth: 0,
          min: 0,
          visible: false,
          max: 22,
        },
        colors: ['red', 'orange', 'green', 'blue', 'purple'],
        series: [
          {
            name: 'Fill',
            type: 'bar',
            data: [22, 22, 22, 22, 22],
            grouping: false,
            color: 'grey',
            enableMouseTracking: false,
          },
          {
            dataLabels: {
              enabled: true,
              verticalAlign: 'top',
            },
            type: 'bar',
            data: [22, 6, 6, 1, 10],
            colorByPoint: true,
            grouping: false
          }
        ]
      }
    return (
      <HighchartsReact highcharts={Highcharts} options={options} />
    );
}
export default Chart;