Search code examples
javascriptreactjsreact-hookshighcharts

React Highcharts heatmap plot overlap

I'm trying to generate Highcharts heatmap with plot padding. It's working fine with HighCharts configuration if I use cdn link. It's not working exactly when I use highcharts-react-official npm package. I'm using the same configuration but the plot padding is working only with left and right and it's not working for top and bottom.

Attaching the codes of Sandbox and JSbin.

JSBin: https://jsfiddle.net/Lorcamew/

Code Sandbox: Edit musing-sea-9w6r2p

I'm trying to achieve something like this. Can someone guide me what's wrong with the code in react sandbox? enter image description here

Solution

  • The difference results from the fact that you are using two different Highcharts versions:

    • jsfiddle - the newest one, so 11.1.0
    • codesanbox - 10.3.3

    If you equal the versions, both examples will work in the same way.

    Live example: https://codesandbox.io/s/flamboyant-dream-px6dp-px6dpd