CODEWITHSUNDEEP
javascripthighcharts
arunmmanoharan
arunmmanoharan

Reputation: 2675

Bar Chart Gauge Highcharts

How do I achieve a bar gauge chart?

I need a chart like this:

enter image description here

I followed the steps from here, but I am not able to define the stops properly. https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html

These are my stops:

 stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
]

Please advice.

var value = "3.0";

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    plotBorderWidth: 2,
    plotBackgroundColor: '#D6D6EB',
    plotBorderColor: '#D8D8D8',
    plotShadow: true,
    spacingBottom: 43,
    width: 350,
    height: 120
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  xAxis: {
    tickLength: 0
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      y: 1
    },
    min: 0,
    max: 4,
    tickInterval: 1,
    minorTickInterval: 1,
    tickWidth: 1,
    tickLength: 8,
    minorTickLength: 5,
    minorTickWidth: 1,
    minorGridLineWidth: 0
  },
  legend: {
    enabled: false
  },
  series: [{
    borderColor: '#7070B8',
    borderRadius: 3,
    borderWidth: 1,
    color: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 0
      },
      stops: [
        [0, '#ffffff'],
        [1, '#ff0000'],
        [2, '#f3f03c'],
        [3, '#FFA500'],
        [4, '#02c102']
      ]
    },
    pointWidth: 50,
    data: [parseInt(value)]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

So if the value is 1, the bar should progress from 0 to 1 and be red. So if the value is 2, the bar should progress from 0 to 2 and be yellow. So if the value is 3, the bar should progress from 0 to 3 and be orange. So if the value is 4, the bar should progress from 0 to 4 and be green.

Upvotes: 1

Views: 209

Answers (1)

ksav
ksav

Reputation: 20821

You can create an array of zones and apply a specific color to each value range.

An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.

const gaugeValue = 4;

Highcharts.chart('barGauge', {
  chart: {
    type: 'bar',
    height: 120
  },
  title: {
    text: ''
  },
  yAxis: {
    min: 0,
    max: 4,
    tickInterval: 1,
    title: {
      text: null
    },
  },
  legend: {
    enabled: false
  },
  series: [{
    data: [parseInt(gaugeValue)],
    zones: [{
        value: 1,
        color: '#ffffff'
      }, {
        value: 2,
        color: '#ff0000'
      },
      {
        value: 3,
        color: '#f3f03c'
      },
      {
        value: 4,
        color: '#FFA500'
      },
      {
        value: 5,
        color: '#02c102'
      }
    ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>

jsfiddle

Upvotes: 1

Related Questions