Antti
Posts: 2
Joined: Fri Jul 12, 2019 6:28 am

Zoom buttons and value label visibility in bar charts

I have bar chart which has very large variation in values (https://cloud.highcharts.com/show/NKqHVk7p6). The chart is embedded in a page (https://www.lounaistieto.fi/tilastot/vaesto/) which is responsive. Responsiveness further increases the problem caused by high value variation.

Zooming is enabled in the chart, but I would like to make things easier to the user and add a zoom in and zoom out icons (magnifier glass style) to automatically zoom in to smaller values. In this particular chart the zoom in level should be approximately +-200.

Is there an easy way to add such icon buttons in Highcharts Cloud?

I also have another question concerning this chart. I would like to add value labels in the chart but only if they fit in. I managed to control the visibility of labels according to label value (e.g. only values > 300 are visible) but that is not very neat solution in responsive charts. Is there a way to adjust value label visibility according to actual bar width?
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Zoom buttons and value label visibility in bar charts

Hi Antti,

Welcome to our forum and thanks for contacting us with your questions!

1. Are you looking for this type of magnifier glass zoom? https://www.w3schools.com/howto/howto_j ... _glass.asp

If yes, unfortunately, as long I work with Highcharts, I have never seen anything like that and it would be hard to achieve. We don't provide anything like this and probably will not support, especially in Cloud.

If I misunderstood you and you are looking for something else, could you, please, explain more precisely once again?

2. I don't have access to your specific chart's config so I can't test it. You need to play and try plotOptions.series.dataLabels.crop and other options.
I will be able to say more if you provide me more screens or data so I can reproduce your chart and test it in my environment.
If possible, online jsFiddle would be even better.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Antti
Posts: 2
Joined: Fri Jul 12, 2019 6:28 am

Re: Zoom buttons and value label visibility in bar charts

Thanks for quick response!

1. Perhasps I wasn't quite clear about the magnifying glass thing. What I have in mind is to use magnifying glass icons (or image) instead of buttons to create a zoom in and out functions. The function should only zoom in to certain pre-defined min/max value range (zoom in) and reset zoom (zoom out).

2. I would need similar kind of custom code applicable in Highcharts Cloud as in this post: https://stackoverflow.com/questions/444 ... tacked-bar. Is this possible?
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Zoom buttons and value label visibility in bar charts

Thanks for the clarification, it will be much easier then.

1. You can create your own HTML buttons or use Highcharts SVG Renderer like in this example: https://jsfiddle.net/BlackLabel/6zgb5L1c

To zoom in, you will use yAxis.setExtremes() method, to zoom out you will use chart.zoomOut() method (you need to calculate extremes on your own depending on your data).
To make your SVG buttons responsive, you can use chart.events.render event. You can find examples here: viewtopic.php?t=41586 and here: https://highcharts.freshdesk.com/a/solu ... g-renderer

2. Emm, yes, it is possible and simple, just paste your chart options in Customize -> Custom Code (uncomment code example that already is there).

API Reference: https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... erer#image
https://api.highcharts.com/class-refere ... etExtremes

Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”