CODEWITHSUNDEEP
highcharts
tarek nasif
tarek nasif

Reputation: 59

How can I add customized y axis in highchart basic bar?

Bar chart

I want to make a chart like this in highchart. How can I add the yellow colored box in my chart

Upvotes: 0

Views: 112

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

It can be made by adding additional x-axes (in a bar chart x-axes are vertical ones) and setting them as opposite and linked to the main axis. Check the code and demo posted below and let me know if something is unclear to you.

Code:

const defaultLabelOptions = {
  opposite: true,
  linkedTo: 0,
  lineWidth: 0,
  tickWidth: 0
};

const defaultAxisTitleOptions = {
  align: 'high',
  rotation: 0,
  margin: 0,
  textAlign: 'center',
  style: {
    'text-decoration': 'underline',
    'font-weight': 'bold'
  }
};

// ...

xAxis: [{
  categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  title: {
    text: null
  }
}, {
  ...defaultLabelOptions,
  offset: 50,
  labels: {
    align: 'right',
    formatter: function() {
      return labels.le[this.value];
    }
  },
  title: {
    text: 'LE',
    ...defaultAxisTitleOptions
  }
}, {
  ...defaultLabelOptions,
  offset: 110,
  labels: {
    align: 'right',
    formatter: function() {
      return labels.tgt[this.value];
    }
  },
  title: {
    text: 'TGT',
    ...defaultAxisTitleOptions
  }
}]

Demo:

API reference:



If you want to have lines between the additional axes you can add them using Highcharts.SVGRenderer: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Upvotes: 4

Related Questions