Highcharts Demo

author(s): Torstein Hønsi

by vasagi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

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

JavaScript

Highcharts.chart('container', {
  chart: {
    height: 320,
    //width: 452,
    events: {
      load() {
				// Change color of the first yAxis tick
        this.yAxis[0].ticks[0].mark.attr({
          stroke: '#ccd6eb'
        });
      }
    },
    style: {
      fontFamily: 'Inter var',
    },
  },
  title: {
    align: 'left',
    margin: 40,
    style: {
      fontSize: 14,
      fontWeight: 'bold',
    },
    text: 'Cash balance reducing linearly'
  },
  subtitle: {
    align: 'left',
    style: {
      fontSize: 13,
      color: '#797675'
    },
    text: 'Cash balance has been predictable for the past 5 months'
  },
  xAxis: {
    categories: [
      "Something long",
      "Something long",
      "Something long",
      "Something long",
      "Something long",
      "Something long",
    ],
    labels: {
      autoRotation: undefined,
      style: {
        color: '#3d3b3b'
      },
    }
  },
  yAxis: {
    min: 0,
    tickLength: 40,
    tickWidth: 1,
    tickColor: '#e6e6e6',
    labels: {
      align: 'left',
      autoRotation: undefined,

      style: {
        color: '#3d3b3b'
      },
      x: -34,
      y: -4,
      format: '${text}',
      formatter: ''
    },

    title: {
      align: 'high',
      margin: 0,
      reserveSpace: false,
      rotation: 0,
      style: {
        color: '#3d3b3b'
      },
      text: 'Cash (millions)',
      textAlign: 'left',
      x: 40,
      y: -4
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0.3,
      groupPadding: 0,
      borderWidth: 0,
      maxPointWidth: 40,
    }
  },
  series: [{
    name: 'Cash balance',
    type: 'column',
    data: [
      12541723,
      12261236,
      11956359,
      11624971,
      11956359,
      11624971,
      11956359,
      11624971,
      11264766
    ],
    pointWidth: 30,
    yAxis: 0
  }],
  colors: ['#79c298'],
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  }
});