text: import React from 'react'
  import Chart from "react-apexcharts";
  import CONFIG from 'config'
  export default class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        options: {
          chart: {
            toolbar: {
              show: false
            }
          },
          legend: {
            show: false,
            position: 'bottom',
            showForNullSeries: true,
            showForZeroSeries: true,
            horizontalAlign: 'right',
            labels: {
              colors: [CONFIG.labelColor],
              useSeriesColors: false
            },
          },
          markers: {
            fillColors: CONFIG.VulnerabilityChartBackColors
          },
          stroke: {
            colors: CONFIG.VulnerabilityChartBackColors,
            curve: 'straight',
            width: 1.2
          },
          dataLabels: {
            enabled: false
          },
          fill: {
            colors: CONFIG.VulnerabilityChartBackColors,
            gradient: {
              enabled: true,
              stops: [0, 50, 200],
              opacityFrom: 0.45,
              opacityTo: 0
            }
          },
          tooltip: {
            theme: 'dark'
          },
          xaxis: {
            labels: {
              style: {
                colors: '#B3BBFD',
              },
              offsetY: 2
            },
            axisBorder: {
              show: false,
            },
            axisTicks: {
              show: false,
            },
            categories: ['03/12', '03/14', '03/12', '03/22', '03/25', '04/03', '04/05', '04/07', '04/08', '04/10', '04/12', '04/14', '04/16', '04/19']
          },
          yaxis: {
            labels: {
              style: {
                colors: '#B3BBFD',
              },
              offsetX: -10
            }
          },
          grid: {
            borderColor: '#272C55'
          }
        },
        series: [
          {
            name: 'CRITICAL',
            data: [19, 20, 21, 22, 18, 20, 22]
          },
          {
            name: 'MEDIUM',
            data: [22, 23, 25, 28, 17, 24, 24]
          },
          {
            name: 'HIGH',
            data: [24, 25, 27, 30, 25, 27, 29]
          },
          {
            name: 'LOW',
            data: [27, 28, 30, 38, 44, 34, 34]
          }
        ]
      }
    }
    render() {
      return (
        <Chart
          options={this.state.options}
          series={this.state.series}
  
          type='area'
          width='100%'
          height='370px'
        />
      );
    }
  };