highcharts-热图底部的多余空间

Question

I have a heatmap that has some space at the bottom that I want to get rid of. I have tried multiple SO threads suggesting that I change chart.marginBottom, chart.spacingBottom, x and yAxis margins, disabled legend, etc. Unfortunately, I created a jsfiddle and am unable to replicate the issue. The jsfiddle code is nearly identical my code: http://jsfiddle.net/b637gdxv/1/

chart: {
        type: 'heatmap',
        marginTop: 26,
        marginLeft: 5,
        marginRight: 5,
        marginBottom: 5,

        width: 200, // - width when in one row 
        height: 250,

        borderWidth: 3,
        borderColor: 'grey',
        borderRadius: 5,
        plotBackgroundColor: '#FFFFFF',
        plotShadow: true
    },

Here is an image of what it looks like on my page:

Notice the extra space on the bottom. Sorry that I am not able to define the problem more specifically - the difference between my page and the jsfiddle eludes me, and I am not super experienced with javascript. Any ideas of things to try?

Answer 1

Since we don't have enough code to really identify what you're issue is and you can't even reproduce it on jsfiddle, I'll give you a walkthrough of the steps I take to identify CSS issues and fix them - particularly when the CSS is applied dynamically.

If you're using IE, use the developer tools (F12). From the HTML tab click the "Select Element" tool (it looks like a pointer). Move the mouse to the outer box and it will garnish a slight grey border... click the mouse.

At this point - I think you'll have in the HTML pane the following tag highlighted:

<rect class=" highcharts-background" fill="#ffffff" stroke="grey" stroke-width="3" x="1.5" y="1.5" width="196" height="246" rx="5" ry="5" strokeWidth="3"/>

Note the attributes are clickable and can be changed on the fly.

At this point you can start tinkering with the styles (on the right pane) or even switch to the CSS pane (next to the HTML tab) and tinker around with the various CSS definitions.

There are different developer tools for each browser. Chrome has them built in as well and Firefox has the FireBug plugin to provide them. For this type of thing they come close to working the same way.

Let us know what you find and good luck!

Answer 2

I'm running into a similar question with my heatmaps, and updated the jsfiddle to show the issue:

http://jsfiddle.net/v1697qhj/

You'll notice in that example that the cells of the heatmap do not fill the full height set on "chart.height". I'm wondering if the issue is because the number of rows divided into the available height is not an even number of pixels, so when highcharts draws the rows at a fixed pixel height there is some amount of total space left over that is never used.

Does anyone know if there's a way to get Highcharts to add a pixel to every so many rows (or columns for the horizontal case) so that the cells of the heatmap will always fill the available plot area?

chart: {
    type: 'heatmap',
    marginTop: 26,
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 5,
    width: 200,  
    height: 250,    // We want the cells to fill this entire height
    borderWidth: 3,
    borderColor: 'grey',
    borderRadius: 5,
    plotBackgroundColor: '#FFFFFF',
    plotShadow: true
}

Answer 3

Did a little more digging into the highcharts JS source code, and found a work around! This is actually being impacted by the logic that calculates the axis ticks, so setting the "endOnTick" option to 'false' on the impacted axis appears to resolve the issue. Eg

yAxis: {
    labels: {
      enabled: false
    },
    endOnTick: false,  // This is the fix
    title: null,
    reversed: true
}

Here is an updated jsfiddle showing the fix:

http://jsfiddle.net/e0av9wm1/

Compare to the following, which doesn't include the fix:

http://jsfiddle.net/v1697qhj/