Budget vs spending

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 700px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

Highcharts.chart("container", {
  chart: {
    inverted: false,
    zoomType: "xy",
    resetZoomButton: { theme: { style: { visibility: "hidden" } } },
    spacingBottom: 5,
    spacingTop: 10,
    polar: true,
  },
  title: {
    text: ".",
    style: { color: "rgba(255, 255, 255, 0)", fontSize: "1px" },
    floating: true,
    margin: 0,
  },
  tooltip: {
    enabled: true,
    borderWidth: 1,
    borderRadius: 1,
    backgroundColor: "#ffffff"
  },
  plotOptions: {
    series: {
      animation: { duration: 700 },
      cursor: "pointer",
      allowPointSelect: true,
      showInLegend: true,
      turboThreshold: 0,
      stickyTracking: false,
      events: {},
      point: { events: {} },
      borderRadius: 0,
      threshold: null,
    },
  },
  legend: {
    enabled: true
  },
  xAxis: {
    categories: [
      "UTC-05:00",
      "UTC-03:00",
      "UTC+09:00",
      "UTC+08:00",
      "UTC+05:30",
      "UTC+01:00",
      "UTC+00:00",
      "UTC",
    ],
    reversed: false,
    lineWidth: 0,
    tickmarkPlacement: "on",
    labels: {
      enabled: true,
      rotation: 0,
      distance: 10,
    },
    tickWidth: 1,
    gridLineWidth: 1,
    gridLineColor: "#C0C0C0",
  },
  yAxis: {
    gridLineInterpolation: "polygon",
    lineWidth: 0,
    labels: {
      enabled: true,
      rotation: 0
    },
    tickWidth: 0,
    allowDecimals: false,
    plotLines: [
      {
        value: 250,
        zIndex: 5,
        color: "rgba(178,34,34,1)",
        dashStyle: "Solid",
        width: 1,
        label: {
          x: 0,
          y: 0,
          rotation: 360,
          text: "L1",
          style: {
            color: "#000000",
            fontSize: "1.143rem",
            fontFamily: "Open Sans",
          },
          align: "left",
        },
      },
    ],
    plotBands: [],
    gridLineWidth: 1,
    gridLineColor: "#C0C0C0",
  },
  pane: { startAngle: 0, size: "70%", background: null },
  series: [
    {
      type: "area",
      data: [
       ...