Stacked chart configuration issue

[Charlie_Hammer]

Currently i am working on a requirement, which user can see the tooltip while hovering plotted graph area..But my currently implemented solution have following configuration issues.

(1) Y axis lables must be persantages (%), not numbers.
(2) Tool tip must show the all the three staked data with lables
(3) have to remove the red circled three points

I have gone through the Highchart API and come up with an solution, but my code snippet is not working..can any one help me with this please.

project -> https://codepen.io/Aravinda_Meewalaarac ... itors=1010

[bastss]

Hi Charlie_Hammer,

1 - Here I am not sure what you want achieve. If you just want to add "%" to existed values it is possible by set properly format for yAxis.
API: https://api.highcharts.com/highcharts/y ... els.format
Demo: https://jsfiddle.net/Bastss/10zxsmn9/
Check also this example. In my opinion is more clear for % column charts. https://jsfiddle.net/Bastss/2uaLxsgz/
2 - Tooltip will show all three data if you set shared property in tooltip for true. API: https://api.highcharts.com/highcharts/tooltip.shared
3 - This three points are a legend of chart. You can remove them by set legend enabled to false. API: https://api.highcharts.com/highcharts/legend.enabled
Demo for 2 and 3: https://jsfiddle.net/Bastss/u5j98Lr1/

Kind regards!

[Charlie_Hammer]

Hi Charlie_Hammer,

1 - Here I am not sure what you want achieve. If you just want to add "%" to existed values it is possible by set properly format for yAxis.
API: https://api.highcharts.com/highcharts/y ... els.format
Demo: https://jsfiddle.net/Bastss/10zxsmn9/
Check also this example. In my opinion is more clear for % column charts. https://jsfiddle.net/Bastss/2uaLxsgz/
2 - Tooltip will show all three data if you set shared property in tooltip for true. API: https://api.highcharts.com/highcharts/tooltip.shared
3 - This three points are a legend of chart. You can remove them by set legend enabled to false. API: https://api.highcharts.com/highcharts/legend.enabled
Demo for 2 and 3: https://jsfiddle.net/Bastss/u5j98Lr1/

Kind regards!

Thank you Bastss...This resolved my 2 & 3 but not the 1. I need to show max value as 100 and min value as 0. Only 0 value get the % sign...Other label values don't have % symbol.

[bastss]

Charlie,

I am not sure if I understand you. What will be max value in your case? 11 as a sum of data in mango and grapes? 11 = 100%? or 10 = 100% and grapes and mango will be above 100%?

[Charlie_Hammer]

Charlie,

I am not sure if I understand you. What will be max value in your case? 11 as a sum of data in mango and grapes? 11 = 100%? or 10 = 100% and grapes and mango will be above 100%?

Max value will be 100% and chart should not render after 100 margin

[bastss]

Charlie_Hammer,

Finally we figured out solutions to this problem. The first solution is not so complicated, we need to set ticks positions by tickPositioner function - API: https://api.highcharts.com/highcharts/y ... Positioner. This option is generating stiff five ticks (0, 25%, 50%, 75%, 100%), where 100% is maximum chart value. Demo: https://jsfiddle.net/Bastss/o0wp5Ltd/

The second solution is more complicated, but the chart will render a different number of ticks with different % values reliant on set data. Demo: https://jsfiddle.net/BlackLabel/s3v4kudg/

Let us know which solution is better for you
Kind regards!