JSFiddle - React, Tailwind, and code Playground

by Calvin Tomkins

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<table id="data">
  <tr>
    <td>Llewellyn</td>
    <td>This Week Progress</td>
    <td>This Month Progress</td>
  </tr>
  <tr>
    <td>Target Progress %</td>
    <td>75</td>
    <td>60</td>
  </tr>
</table>
<div id="graph"></div>

CSS

Highcharts.chart('graph', {
  data: {
    table: 'data'
  },
  chart: {
    type: 'bar',
    backgroundColor: '#422E49'
  },
  colors: ['#03ACF4', '#FACA5E', '#64BC25'],
  legend: {
    enabled: false
  },
  plotOptions: {
    column: {
      borderWidth: 0,
      pointPadding: 0.1,
      dataLabels: {
        enabled: true
      }
    }
  },
  xAxis: {
    lineColor: '#64546A',
    tickColor: '#64546A',
    labels: {
      style: {
        "color": "#EAE7EA",
        "fontSize": "1.5vw"
      },
      useHTML: true
    }
  },
  yAxis: {
    gridLineColor: '#64546A',
    title: {
      text: ''
    },
    labels: {
      enabled: false,
      style: {
        "color": "#EAE7EA"
      }
    },
    plotLines: [{
      color: '#FF0000',
      width: 2,
      value: 100
    }]
  }
});

JavaScript

Highcharts.chart('graph', {
  data: { table: 'data' },
  chart: { type: 'bar', },
  title: { text: 'Llewellyn: 10 Visits Per Week' },
  xAxis: { labels: { rotation: -90 } },
  yAxis: { min: 0, minRange: 105, plotLines: [{ color: '#FF0000', width: 2, value: 100 }] }
});