-1

I'm attempting to build a specific kind of horizontal bar chart using Chart.js, but am running into some issues that I hope to resolve with your help.

The desired chart should feature several categories on the primary y-axis, while the secondary y-axis should display associated text labels underneath each category. One complexity I'm encountering is that different categories have different associated text labels, resulting in Chart.js leaving undesirable empty spaces where a label isn't present. Ideally, I'd like to find a way to hide these spaces and display only the categories on the primary y-axis.

For context, I'm currently consulting this particular article to guide my chart creation process. Unfortunately, none of the solutions presented seem to adequately address my requirements.

I've included an image below to illustrate the design of the horizontal bar chart I'm aiming to reproduce. Any suggestions on how I might better accomplish this would be greatly appreciated. Thank you in advance for your help.

enter image description here

Voon Tao Tan
  • 55
  • 1
  • 6

2 Answers2

1

Maybe you have already had a look but there is a plugin, Chart.js Hierarchical Scale Plugin, which can add a new categorical scale which mimics a hierarchical tree. Hopefully can help: https://github.com/sgratzl/chartjs-plugin-hierarchical

user2057925
  • 2,377
  • 1
  • 12
  • 12
0

After a quick search, I found a previous Stack Overflow question that seems to answer your question. Check this link out. Let me know if this doesn't answer your question and I'll be happy to help further.

Pratyush
  • 108
  • 8
  • Unfortunately, no. The link provided is similar to the link I provided. Just adding the datasets. – Voon Tao Tan Jul 27 '22 at 01:38
  • Okay, check out this link: https://stackoverflow.com/questions/38085352/how-to-use-two-y-axes-in-chart-js-v2. It talks about adding an axis, you can probably change it to labels. If it doesn't work, try adding your code to your question. – Pratyush Jul 27 '22 at 13:05