CODEWITHSUNDEEP
angularhighchartsbar-chartprogress-bar
Athulya Ratheesh
Athulya Ratheesh

Reputation: 341

Customize highchart graphs with different labels

In my highchart graphs, multiple linear bar charts are displayed to show progress for different data sets. By showing data corresponding to each bar in these charts, I am trying to customize them. Here is how I would like the graph displayed.

enter image description here

It has been done successfully to create graphs with different types of data, but now I have to display the related data using the above format. I have altered the attributes to add them as the same. However, it did not reflect.

A working version of the graph code is provided below.

Working Demo

Also graph data example :

const data= [{ name:”Apple”, Actual_Selling : 1220 , Estimated_selling : 2000},
{ name:”Orange”, Actual_Selling : 45 , Estimated_selling : 800},
{ name:”Pears”, Actual_Selling : 1220 , Estimated_selling : 300},
{ name:”Grape”, Actual_Selling : 456 , Estimated_selling : 56},
{ name:”Banana”, Actual_Selling : 55 , Estimated_selling : 800}]

Upvotes: 1

Views: 54

Answers (1)

Michał
Michał

Reputation: 1469

You can achieve this with xAxis.labels.formatter which when xAxis.labels.useHTML is set to true allows you to use HTML there. Before that, however, you need to properly parse the data and pass it using categories.

Demo: https://jsfiddle.net/BlackLabel/5oteqmwa/
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
https://api.highcharts.com/highcharts/xAxis.labels.useHTML

Upvotes: 0

Related Questions