Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

const colorsArrray = ['#968FC0', '#B4CDB4', '#F0E3B9', '#BBCEEB', '#F2B1AB', '#DED7CA', '#E8BD7C', '#99AA98', '#B99A97', '#B7D9D9']

const decideColorBasedOnValue = (value, index) => value < 0 ? '#B22222' : colorsArrray[index % colorsArrray.length];

const dataArrayForChartExtreacted = [100000, 2000, 50000, 3, 0];

const finalChartDataWithColor = dataArrayForChartExtreacted.map((value, index) => ({
  y: value || null,
  color: decideColorBasedOnValue(value, index)
}));

Highcharts.chart('container', {
  series: [{
    data: finalChartDataWithColor,
    type: 'column',
    minPointLength: 10
  }]
});