Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and disabling the legend, I have had no success. Strangely, when I created a jsfiddle to demonstrate the problem, I could not replicate it. You can view the code in the jsfiddle that closely resembles mine: 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
    },

Below is an image showing how it appears on my page:

https://i.sstatic.net/LZhvS.png

I am struggling to pinpoint the exact source of the issue as the discrepancy between my page and the jsfiddle remains unclear to me. As I am not very familiar with javascript, I am seeking suggestions or potential solutions that could help resolve this problem. Any insights or advice would be greatly appreciated.

javascriptjqueryhtmlcsshighcharts

Answer №1

After delving deeper into the highcharts JS source code, I uncovered a solution! The issue lies in the logic that calculates the axis ticks, so by setting the "endOnTick" option to 'false' on the affected axis, the problem seems to be resolved. For example:

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

You can view the updated jsfiddle with the fix here:

http://jsfiddle.net/e0av9wm1/

Contrast it with the version that does not include the fix:

http://jsfiddle.net/v1697qhj/

Answer №2

It appears that we are facing difficulty in identifying the root cause of your issue without sufficient code. If the problem cannot be reproduced on jsfiddle, I can guide you through the steps that I typically take to troubleshoot and resolve CSS issues, especially when the CSS is applied dynamically.

If you are using Internet Explorer, utilize the developer tools (F12). Navigate to the HTML tab and select the "Select Element" tool (depicted as a pointer). Hover over the outer box until a slight grey border appears, then click.

At this stage, you should see the highlighted tag in the HTML pane:

<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"/>

It is worth noting that the attributes are clickable and can be modified instantly.

You can now experiment with the styles (located in the right pane) or switch to the CSS pane (adjacent to the HTML tab) to adjust the different CSS definitions.

Each browser has its own set of developer tools. Chrome includes them by default and Firefox offers the FireBug plugin for this purpose. In this scenario, the functionality is quite similar across all platforms.

Please keep me informed of your progress and best of luck!

Answer №3

I've encountered a similar issue when working with my heatmaps and have made some updates in the jsfiddle to demonstrate the problem:

http://jsfiddle.net/7w82n1yu/

Upon inspection of the example, it is evident that the cells of the heatmap do not completely fill the designated height set on "chart.height". I suspect this discrepancy is due to the division of the number of rows into the available height not resulting in an even number of pixels. As a result, when Highcharts renders the rows at a fixed pixel height, there may be some leftover space that remains unused.

Is there a method for prompting Highcharts to add a pixel to every few rows (or columns in the case of horizontal alignment) so that the cells of the heatmap always occupy the entire plot area?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Container beyond div

Having an issue with the div extending beyond the container in Bootstrap 4. When a green div reaches the edge of the page, instead of being cut off it causes a horizontal shift in the page layout. How can this be avoided? Appreciate any assistance. Live ...

htmltwitter-bootstrapcssbootstrap-4

There seems to be an issue with the rangeslider.js jQuery plugin not being recognized as a function within the project. However, there are

I am currently working on integrating a Range-slider into my Django project with the help of rangeslider.js. I was able to successfully create a functional example on Codepen at https://codepen.io/Slurpgoose/pen/GRRpmpX, and everything seemed to be running ...

javascriptjqueryhtmldjangorangeslider

Issue with React and Material UI: The Textfield's "onChange" event is not being triggered

I have been attempting to trigger an onchange function when my Textfield is populated, but for some reason the function never seems to be activated. Despite seeing changes triggered by the React devtool plugin in Chrome, I am at a loss. Any suggestions? i ...

javascriptreactjsmeteoronchangematerial-ui

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Within this element, there is a text input field that allows users to search for specific items. Next to the input field is an icon image that can be clicked on to trigger a jQuery onclick event. This event sends an AJAX request to a PHP file, retrieves da ...

javascriptjqueryhtml

Mongoose: Unable to fetch item using its specific identification - Error 404

I've been attempting to fetch objects from MongoDB using Mongoose, but I keep encountering a 404 error. router.get('/blogs/:id', function(req, res){ console.log('trying to get one blog post by id'); Blog.findOne({ _id: req.para ...

javascriptmongodbexpressmongooseserver

Tips for eliminating repetitiveness in situations such as BEM modifiers

As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements. The challenge at hand is changing the link color to red when product-desc-name has the mark class. The snippet below illustrat ...

cssbem

JavaScript code for displaying and concealing elements

I have a simple requirement where I need to check for a variable and display or hide a class based on its value. This is being done on a SharePoint publishing page. The snippet below is not working as expected: if (source === 'show') { $(&a ...

javascriptjquerysharepoint-2010

What is preventing me from translating JS Canvas Image?

I've been struggling with using ctx.translate() to translate images on a canvas. No matter what I do, it just won't work. I've spent a good amount of time trying to troubleshoot the issue. Here's the snippet of code I'm working wit ...

javascriptjqueryhtml5-canvas

The URL is being modified, yet the page remains static in the React application

I've been working on setting up a router with react-router-dom, but I'm facing an issue where my URL gets updated without the page routing to the specified component. Here's a snippet from my App.js: import "./App.css"; import { Br ...

javascriptreactjsreact-routerreact-router-dom

Is there a way to modify this JavaScript code so that it can function with a

I have developed a unique audio player that plays random sections of different songs. Currently, it is hardcoded for one song with three intros, a midsection, and three outros. I am looking to create a system where a list of songs can be randomly chosen fr ...

javascripthtmlhtml5-audio

Printing 'undefined' to the console after making an API call with Vue

After authenticating and fetching data from a 3rd party API in my Laravel Controller, I'm encountering an issue where 'undefined' is being logged in the console instead of the actual data that I want to store in a Vue component. I've t ...

javascriptvue.js

Phonegap's JavaScript canvas feature is experiencing issues

Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...

javascriptandroidhtmlcordova

The nested div within the ui-view element is failing to expand to the entire width of the window

I am facing a challenge in making a child div stretch to the entire width of the window, rather than just the width of its parent. I am incorporating AngularJS with UI-Router, and I'm not sure if that is causing the issue. Attached is a screenshot. ...

javascripthtmlcssangularjs

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

My recent project involved creating a web scraping code to extract information from a local news website. However, I have encountered two issues with the current code. One problem is that when the code retrieves paragraph data and saves it to a CSV file ...

pythonhtmlcsvweb-scrapingbeautifulsoup

Varied elevations dependent on specific screen dimensions

There seems to be a minor issue with the height of the portfolio container divs at specific window widths. The problematic widths range from 1025 to 1041 and from 768 to 784. To visualize this, try resizing your browser window to these dimensions on the fo ...

javascriptjqueryhtmlcss

Communication between clients using a Progressive Web Application (PWA) when

Is there an efficient way to communicate and share data between devices using an offline progressive web app without internet access? I thought of exploring the possibilities with the Web Bluetooth API and generating QR codes through libraries like QRCode ...

javascriptprogressive-web-appsqr-codecommunicationweb-bluetooth

Enhancing imported models in Three.js with antialiasing

When I import an OBJ model into my scene, it appears jagged and lacks smoothness. This is puzzling to me because when opened in Blender, the model looks perfectly smooth. On the other hand, the built-in geometries such as new THREE.SphereGeometry(4, 20, 2 ...

javascripthtmlthree.js

Tips for extracting information from Firebase and showing it on a Google gauge chart

I'm having some trouble displaying data from Firebase on a gauge chart. I keep getting an error that says "Uncaught (in promise)". Here's the JavaScript code I've been working with: <script type="text/JavaScript"> google.ch ...

javascriptfirebasefirebase-realtime-database

Can a single node_module folder be shared across multiple projects within a repository?

Imagine we have a central repository named REPO containing multiple grunt projects. Now, let's say we want to structure it like this: ROOT -- bower_components -- node_modules -- project_1 -- project_2 -- project_3 etc The current issue is that I nee ...

javascriptgitgruntjsnpm

Data formatted in JSON within a document

Recently, I came across a code snippet that demonstrated how to extract data from a JSON array: <div id="placeholder"></div> <script> var data={"users":[ { "firstName":"Ray", "lastName":"Villalobos", "joined": ...

jqueryjson