Combination of Donut and Stacked Bar chart - Top and Bottom position - Legend in Two rows - Request for help - PFA

[nayeemnshaikh]

Hi Team,
Good Day.

We need to show a combination of Donut and Stacked Bar chart as shown in the attachment below.

Donut Chart is on the Top with Title and Legend.

Stacked Bar Chart is at the Bottom with Title and Legend.

Stacked Bar Chart will have a max of 6 legends.

Stacked Bar Chart's 6 Legends is displayed in two rows with 3 legends in each row.

We are using Angular.

Request your help here.

Any reference / demo / jsfiddle / stackblitz URL would be of great help.

Thanking you.

Have a Great Day.

[dominik.c]

Hello nayeemnshaikh!

We appreciate you reaching out to us!

Firstly we need to create two divs in which we'll put our charts.

In the pie chart, we need to set innerSize property to e.g 55%, and then we need to stylize legend using alignment properties, labelFormatter, and symbolRadius.

In the bar chart, we need to hide all axes, set borderWidth to e.g 10 so we'll have spaces between points. Regarding legend, it looks the same as in the pie chart.

API references:
https://api.highcharts.com/highcharts/legend.itemStyle
https://api.highcharts.com/highcharts/l ... lFormatter
https://api.highcharts.com/highcharts/p ... pointWidth
https://api.highcharts.com/highcharts/l ... mbolRadius
https://api.highcharts.com/highcharts/l ... ticalAlign
https://api.highcharts.com/highcharts/legend.align
https://api.highcharts.com/highcharts/chart.marginRight

Demo:
https://jsfiddle.net/BlackLabel/rc2m0yud/

Let me know if that was what you were looking for!
Best regards!

[nayeemnshaikh]

Hello dominik.c,
Greetings for the day. Thank you VERY much for your response and help.

Not sure why we are unable to see the output of the Demo.
We get Page Unresponsive popup.

Request your help and suggestion to know if we can do the same using Combinations Chart

Any reference / live / demo / jsfiddle / stackblitz URL would be of great help.

Thanking you very much. And wishing you with all the Happiness.

[dominik.c]

Hi again!

This problem is related to google chrome browser. I suggest updating it or changing your browser to e.g firefox. Then you should be able to see the demo.

Best regards!

[nayeemnshaikh]

Hello dominik.c,
Greetings for the day. Thanks a lot for your response.

Yeah sure. Will try that and update you.

Request your help and suggestion to know if we can do the same using Combinations Chart

Any reference / live / demo / jsfiddle / stackblitz URL would be of great help.

Thanking you very much. And wishing you with all the Happiness.

[dominik.c]

Hi again!

We could create something similar using only one chart with different series, but using API options we would only have one legend. It's possible to create a custom legend, but it's more advanced. You can check this thread on SO: https://stackoverflow.com/questions/291 ... tal-legend

There is also no possibility to have multiple titles in one chart, so to solve this issue you would probably need to use the annotations module and render the text on specific x and y coordinates of the chart.

API references: https://www.highcharts.com/docs/advance ... ons-module

Best regards!

[nayeemnshaikh]

Hello dominik.c,
Greetings for the day. Thank you soo much for your response.

Thanking you very much and Almighty GOD Bless you with all the Happiness.

[dominik.c]

Hi again!

You're welcome!

In case of any further questions, feel free to contact us again.