CODEWITHSUNDEEP
javascriptjquerycsshighchartsbar-chart
Ahmet Keskin
Ahmet Keskin

Reputation: 1015

Making Highcharts look like progress bar with more than one series

I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).

enter image description here

Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated. Thanks.

var chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',
  type: 'bar',
  backgroundColor: '#003755',
  marginBottom: 60,
  marginLeft: 80,
  marginTop: 40,
  marginRight: 140
  },
  colors: ['#0AA3DB', '#3AC6B1', '#000612'],
  xAxis: [{
    categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
    labels: {
      align: 'left',
      x: 0,
      y: -13,/* to be adjusted according to number of bars*/
      style: {
        fontSize: "0.875rem",
        color: '#fff'
      }
    },
    lineColor: 'transparent',
    tickLength: 0
  }],
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        allowOverlap: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      pointWidth: 8, //width of the column bars irrespective of the chart size
      borderRadius: 5,
      borderColor: 'transparent',
      pointPadding: 0,
      groupPadding: 0,
      dataLabels: {
        enabled: true,
        format: '<b>{point.y:,.0f}</b>',
        shared: true,
        useHTML: true,
        align: 'right'
      }
    }
  },
  exporting: {
    enabled: false
  },

  credits: {
    enabled: false
  },
  tooltip: {
    yDecimals: 2
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
    shared: true,
    useHTML: true
  },
  series: [{
    name: 'Current',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2005',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2023',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }]
});

https://jsfiddle.net/fbsveysb/

Upvotes: 0

Views: 1460

Answers (2)

Deep 3015
Deep 3015

Reputation: 10075

This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'bar',
    backgroundColor: '#003755',
    marginBottom: 60,
    marginLeft: 80,
    marginTop: 40,
    marginRight: 140,
    events: {
      load: function() {
        var maxVal = 0;
        for (var i = 0; i < this.series.length; i++) {
          if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
            maxVal = Math.max.apply(Math, this.series[i].yData)
          }
        }
        this.yAxis[0].setExtremes(0, maxVal + 10)
      }
    }
  },
  colors: ['#0AA3DB', '#3AC6B1', '#000612'],
  xAxis: [{
    categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
    labels: {
      align: 'left',
      x: 0,
      y: -20,
      /* to be adjusted according to number of bars*/
      style: {
        fontSize: "0.875rem",
        color: '#fff'
      }
    },
    lineColor: 'transparent',
    tickLength: 0,
    min: 0,
    max: 4,
    scrollbar: {
      enabled: true
    },
  }],
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    labels: {
      enabled: false
    }
  },
  plotOptions: {
    bar: {
      grouping: true,
      pointPadding: 0,
      dataLabels: {
        allowOverlap: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    },
    series: {
      pointWidth: 8, //width of the column bars irrespective of the chart size
      borderRadius: 5,
      borderColor: 'transparent',
      dataLabels: {
        enabled: true,
        //format: '{point.y:.1f}',
        format: '<b>{point.y:,.0f}</b>',
        shared: true,
        useHTML: true,
        overflow: 'none'
      }
    }
  },
  exporting: {
    enabled: false
  },

  credits: {
    enabled: false
  },
  tooltip: {
    yDecimals: 2
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
    shared: true,
    useHTML: true
  },
  series: [{
    name: 'Current',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2005',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }, {
    name: '2023',
    type: 'bar',
    data: [{
      name: 'USA',
      y: 10
    }, {
      name: 'Japan',
      y: 40
    }, {
      name: 'Canada',
      y: 20
    }, {
      name: 'Brasil',
      y: 5
    }, {
      name: 'China',
      y: 9
    }, {
      name: 'Russia',
      y: 8
    }, {
      name: 'UK',
      y: 7
    }, {
      name: 'France',
      y: 1
    }, {
      name: 'NA',
      y: 0
    }]
  }]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>

Upvotes: 0

Kamil Kulig
Kamil Kulig

Reputation: 5826

Use groupPaddingfor increasing the space between column groups.

The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.

Live working demo: https://jsfiddle.net/kkulig/w782cud7/

API references:

Upvotes: 1

Related Questions