Search code examples
graphhighchartsdata-visualizationaxesgraph-visualization

how to make my series of axes as normal as highercharts width?


how to make my graph looks normal. I searched but I didn't find any relevant result. please help me out. my graph image

how can I make the data represent line's to normal width as they are so "thin" and also please tell me how to remove "0%" at middle of "bar"

I think because of this data my graph not showing properly. But how should pass data. Here below you can see my data


categories: [
  'Energy',
  'Real Estate',
  'Information Technology',
  'Financials',
  'Healthcare',
  'Consumer Discretionary',
  'Materials',
  'Communication Services',
  'Industrials',
  'Consumer Staples',
  'Utilities',
],
series: [{
    name: 'Energy',
    data: [59.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    color: '#385723',
    width: 6,
    dataLabels: {
      color: '#385723',
    },
  }, {
    name: 'Real Estate',
    data: [0, 56.4, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    color: '#385723',
    dataLabels: {
      color: '#385723',
    },
  }, {
    name: 'Information Technology',
    data: [0, 0, 37.1, 0, 0, 0, 0, 0, 0, 0, 0],
    color: '#548235',
    dataLabels: {
      color: '#548235',
    },
  }, {
    name: 'Financials',
    data: [0, 0, 0, 35.1, 0, 0, 0, 0, 0, 0, 0],
    color: '#548235',
    dataLabels: {
      color: '#548235',
    },
  }, {
    name: 'Healthcare',
    data: [0, 0, 0, 0, 26.9, 0, 0, 0, 0, 0, 0],
    color: '#548235',
    dataLabels: {
      color: '#548235',
    },
  }, {
    name: 'Consumer Discretionary',
    data: [0, 0, 0, 0, 0, 21.7, 0, 0, 0, 0, 0],
    color: '#548235',
    dataLabels: {
      color: '#548235',
    },
  }, {
    name: 'Materials',
    data: [0, 0, 0, 0, 0, 0, 13.7, 0, 0, 0, 0],
    color: '#548235',
    dataLabels: {
      color: '#548235',
    },
  }, {
    name: 'Communication Services',
    data: [0, 0, 0, 0, 0, 0, 0, 7.8, 0, 0, 0],
    color: '#A9D18E',
    dataLabels: {
      color: '#A9D18E',
    },
  }, {
    name: 'Industrials',
    data: [0, 0, 0, 0, 0, 0, 0, 0, 6.4, 0, 0],
    color: '#C5E0B4',
    dataLabels: {
      color: '#C5E0B4',
    },
  }, {
    name: 'Consumer Staples',
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, -1.2, 0],
    color: '#F8CBAD',
    dataLabels: {
      color: '#F8CBAD',
    },
  }, {
    name: 'Utilities',
    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, -2.5],
    color: '#F4B183',
    dataLabels: {
      color: '#F4B183',
    },
  },
],


Solution

  • You need to disable grouping:

    plotOptions: {
        series: {
            grouping: false
        }
    }
    

    Live demo: http://jsfiddle.net/BlackLabel/osvje9uz/

    API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.grouping