Converting a single bar chart into a horizontal gauge chart
A horizontal gauge chart is generally used as an indicator for the current threshold level, meaning the extreme values in the y axis are fixed. Another characteristic is the single value (one dimension) in the x axis which is the current time.
Next we are going to learn how to turn a chart with a single bar into a gauge-level chart. The basic idea is to diminish the plot area to the same size as the bar. This means we have to fix the size of both the plot area and the bar, disregarding the dimension of the container. To do that we set chart.width
and chart.height
to some values. Then we decorate the plot area with a border and background color for making it resemble a container for the gauge:
chart: { renderTo: 'container', type: 'bar', plotBorderWidth: 2, plotBackgroundColor: '#D6D6EB', plotBorderColor: '#D8D8D8', plotShadow...