siniiitsa
Posts: 4
Joined: Thu Apr 28, 2022 10:25 am

Heatmap numbers misplaced on mobile

I have a heatmap chart that looks fine on wider screens, but not so much on mobile. Cell numbers get misplaced. Any hints on how to fix that?
Screenshot at Jul 05 15-21-20.png
Screenshot at Jul 05 15-21-20.png (101.42 KiB) Viewed 169 times
Screenshot at Jul 05 15-20-26.png
Screenshot at Jul 05 15-20-26.png (115.13 KiB) Viewed 169 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Heatmap numbers misplaced on mobile

Hi,

Thank you for contacting us!

The numbers are displayed properly - but because of the font size and cell width, they don't fit inside their cell and overlap with the next one.

You can change the font size, but that might make the chart less readable on mobiles.
The second solution would be to implement the chart.scrollablePlotArea. That way you can set the minWidth of your chart, and not lose the readability of the data.
DEMO: https://jsfiddle.net/BlackLabel/9ycw8x1d/
API Reference: https://api.highcharts.com/highcharts/c ... lePlotArea

Let me know if this solves your issue,
Best regards!
Kamil Musiałowski
Highcharts Developer
siniiitsa
Posts: 4
Joined: Thu Apr 28, 2022 10:25 am

Re: Heatmap numbers misplaced on mobile

Code: Select all

scrollablePlotArea: {
    minWidth: 480,
    scrollPositionX: 1,
}
worked pretty well but it broke the legend. Horizontal lines stick from the side now.
Screenshot at Jul 06 13-25-58.png
Screenshot at Jul 06 13-25-58.png (104.45 KiB) Viewed 154 times
And I'm not sure how to change the fontSize of heatmap cells. Would appreciate if you tell me. Thanks!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Heatmap numbers misplaced on mobile

You can change the font size in series.dataLabels.style.

Code: Select all

  series: [{
    dataLabels: {
      style: {
        fontSize: 20
      }
    }
  }],
When it comes to solving the legend issue, I would have to take a look at your code. Could you reproduce it in an online editor (i.e JSFiddle), so that I can work on a solution?

Regards!
Kamil Musiałowski
Highcharts Developer
siniiitsa
Posts: 4
Joined: Thu Apr 28, 2022 10:25 am

Re: Heatmap numbers misplaced on mobile

Thanks! But I've just put the legend to the bottom of the chart and it seems good enough. Thanks for your help!
localhost_3000__marker_ID=14717(iPhone SE).png
localhost_3000__marker_ID=14717(iPhone SE).png (156.94 KiB) Viewed 144 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Heatmap numbers misplaced on mobile

That looks great! I'm glad that you are happy with the solution.

Feel free to contact us anytime in the future,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”