Have bar chart as Y axis

[pooja1931]

Hi All,


we need to plot a chart where y axis values are configurable and it looks similar to stacked bar chart so wanted to hide y axis and show stacked chart as y axis.
Is that possible or any other approach to do this?


Fiddle Link for reference: https://jsfiddle.net/vzw12570/

[jakub.s]

Hi,

Thanks for the question!

You can experiment with creating multiple xAxis (or even yAxis, depending on the desired solution) to achieve this result.

Here's a demo: https://jsfiddle.net/BlackLabel/vwkjo2n9/

Let me know if that's what you were looking for.

Best regards,
Jakub

[rohit9133]

We want to achieve something like attached screenshot.

[pooja1931]

Hi,

Also Can we change lineColor for yaxis dynamically ?

Currently we have only one color , what If we want three or four colors based on threshold values?

https://jsfiddle.net/b7ejos3f/

[jakub.s]

I'm sorry but I don't see any screenshot attached.

If you want to change the yAxis.lineColor, you can do this with yAxis.update.

Here's a demo: https://jsfiddle.net/BlackLabel/mbvxg083/

API: https://api.highcharts.com/class-refere ... xis#update

Best regards,
Jakub

[rohit9133]

I want to achieve below design:
https://drive.google.com/file/d/1uhohO_ ... share_link

Inside the line color of the axis itself:
https://jsfiddle.net/n5e3xdo0/

[jakub.s]

How about something like this: https://jsfiddle.net/BlackLabel/jp3c4tof/

Does that work for you?

[rohit9133]

Exact same code is giving me below error while I am using it with Angular.

src_app_dashboard_dashboard_module_ts.js:1 ERROR Error: Highcharts error #18: www.highcharts.com/errors/18/
at Object.<anonymous> (highcharts.js:12:238)
at y (highcharts.js:18:319)
at g (highcharts.js:12:161)
at highcharts.js:424:203
at Array.forEach (<anonymous>)
at t.<anonymous> (highcharts.js:423:464)
at y (highcharts.js:18:319)
at a.bindAxes (highcharts.js:423:412)
at a.init (highcharts.js:421:488)
at a.initSeries (highcharts.js:368:380)

If I am giving xAxis:1 -----------> On this line its giving error

Any suggestions?

[jakub.s]

Are you sure that you have the exact same config as in the demo I've sent?

I think this error stems from not defining xAxis as an array (of 2 elements), but from simply setting the xAxis = {} to an object.

I believe this error should disappear when you have xAxis = [{}, {}]. Then, xAxis: 1 will not throw an error because there will be xAxis defined for 0 and 1.

Let me know if that solves your problem.

Best regards,
Jakub

[jakub.s]

Also, I've tried to recreate your design from the screenshot you've sent.

That's what I came up with for now: https://jsfiddle.net/BlackLabel/Lf36m4ek/

When you change the font to the one you have in your project from the one default in Highcharts it should look very similar.

Please let me know if you need anything else here - I'll try to add it as soon as I can to achieve the result you desire.

Jakub

[rohit9133]

Thanks, this helps.

[jakub.s]

I'm glad it helps:)

Do not hesitate to let me know if you have any more questions about this project.

I'll do my best to help.

Jakub

[rohit9133]

I have one more design to achieve in which I am facing small issue. Design is below:
https://drive.google.com/file/d/1cD7jXT ... share_link

I want to place different svgs in every different categories:
http://jsfiddle.net/kcgLxtvy/1/

[jakub.s]

Hi,

You've done most of the job, there's not much left.

The only thing you need to add is dataLabels.align: "right" and add a condition in the dataLabels.formatter() function which will render different SVGs based on the point.x.

Here's a demo: http://jsfiddle.net/BlackLabel/46ra9g0n/

This way you'll be able to achieve your design.

Let me know if that helps.

Jakub

[amol333]

Hi Jakub,

I tried creating y axis using stacked chart on x axis to simulate different colors on Y axis, however, it is getting disappeared when I'm implementing it on stock chart and changing the navigator. Can you please suggest a solution for this?