Adjust the width of Highcharts heatmap columns based on the size of their content

Is there a way to adjust the column width in Highcharts heatmap table based on its content, similar to a standard HTML table? Currently, longer entries overflow outside of the column as the heatmap maintains the same width for all columns, even if some have extra space.

Here is a Fiddle demonstrating the issue: http://jsfiddle.net/tvxgber9/

Below is the code (identical to the Fiddle provided):

Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
    },

    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123456789123456789], [2, 3, 64],...
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]
    
});

Answer №1

Transforming a heatmap to function like an HTML table, where columns adjust their width based on content, can be quite challenging as detailed in my response to the original poster’s question.

Follow these steps to achieve it (no guarantees of success):

  1. Create each column as a separate series (since colsize only applies to individual series and we require specific colsize for each column).
  2. Determine the longest label for each column during the chart.load event by examining the data labels (SVG elements) associated with each point to find the width property.
  3. Utilize the xAxis[0].toValue function to establish the colsize for every column.
  4. Calculate new x values for each column based on the span values of preceding columns. Update all points accordingly.
  5. The default categories feature is not suitable due to its fixed tick interval. Instead, use xAxis.tickPositions to position the ticks to align with the columns. Additionally, utilize xAxis.labels.formatter to determine appropriate names for each x-axis label.

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

Set a class for the element created with document.createElement('img') method

Is there a way to apply the .rotatable class to the image below without using ('src', 'rotate.png')? $(document.createElement('img')).attr('src', 'rotate.png') css: .rotatable { cursor: move; bac ...

The container cannot contain the overflowing DIV

I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...

Using canvas elements to position divs in three.js

I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such a ...

Building a grid structure using Bootstrap CSS framework

I am trying to insert some rows inside my <div class="col-sm-1"></div>, but I'm not sure if placing a <div class="row"> inside the col-sm-1 is the correct way to do it. This is the desired effect I am aiming for: https://i.sstatic. ...

Can you help me understand the process of assigning HTML form values to SESSION variables?

My current project involves an HTML form with 16 fields that can be viewed here: . I am seeking advice on the most efficient method to capture all field values and store them as SESSION variables. Would utilizing an array for this task be optimal, or is i ...

Obtain the information sent by the Jquery ajax call

Below is the code snippet in question: $.ajax({ type: 'GET', data: { s: sToSearch }, url: 'http://localhost:9809/handlers/search.ashx', }).done(function (d) { sCache[sToSearch.toLowerCase()] = d; showResult(d); }); ...

Enhancing User Experience in VueJS with Pug Templates and Transitions

Managing multiple 'pages' of content within a multi-step process can be challenging, especially when trying to incorporate VueJS's transition feature for a carousel-like slide in/out effect. The contents being transitioned are stored in sepa ...

I am attempting to add user input to the parent container when the button is clicked, but for some reason it is

Recently delving into jquery, I attempted to dynamically add an input field to a parent div on button click, but encountered some difficulties. Specifically, my goal was to insert a div with an input element into the parent div identified by the id "join ...

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

I am looking to integrate a "reveal password" feature using Bootstrap 5

I had hoped for something similar to this Image from bootstrap However, what I ended up with was this Image on my local host This is the code I have: <input type="password" class="form-con ...

Causing a 404 error with Htaccess RewriteRule and parameters

I have a WordPress website set up on my localhost in a folder named "abcd". The address is localhost/abcd. I want to redirect localhost/abcd/xxx/first/second to localhost/abcd/xxx?a=first&b=second. I tried using this .htaccess code, but it's not ...

Column spilling over with cards

Having a card with a form in it, I wanted to implement a y-scroll bar to control the visibility of the form on the page. However, it seems that the columns are extending beyond the boundaries of the card. .card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2 ...

I'm looking for a way to display a modal when a button is clicked and no record is selected from my table. My project is utilizing Bootstrap 4

<table id="resultTable" class="table table-hover table-bordered table-sm"> <thead> <tr> <th>Select</th> <th>Message Id</th> <th>Service</th> <th>Date</th> & ...

Is there a way to display the value of a script function within an HTML block in an Angular application?

I need assistance displaying the "timeStops" value in an HTML block using a script. The "timeStops" output is in array format and I would like to showcase this array value within an HTML block. Here is the output of timeStops: [ "21:00", " ...

Creating a suggestion box within an HTML container using JavaScript

https://i.sstatic.net/Asi5r.pngI am currently working on a page where users can click on a word and receive a small suggestion box (like a tiny popup) to choose synonyms they prefer. Although I believe this can be achieved with JavaScript, I haven't ...

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

Display fixed information in a separate tab using express and ejs

I have an Express app that is running smoothly with a MongoDB backend, and it's able to render tables with data flawlessly. However, I've encountered an issue when trying to export a table from my database. The exported table looks something like ...

I am receiving a high volume of row data from the server. What is the best way to present this information on a redirected page?

There is a scenario where Page 1 receives a substantial amount of row data in JSON format from the server. The goal is to present this information on Page 2, which will be accessed by clicking on Page 1. To accomplish this task, JavaScript/jQuery and PHP ...

Issue with calculating positions in the jquery.quicksand plugin

I've been playing around with a website for the past couple of days and I have successfully implemented the jquery.quicksand plugin to organize my portfolio entries. However, I've run into an issue when selecting the 'all' filter. If a ...

There are occasions when the Phaser sprite.kill() function fails to execute

Currently, I am developing games using Phaser and have encountered an issue with the sprite.kill() method. At times, when I invoke sprite.kill(), it appears that Phaser destroys the body for collisions/overlapping, but the visual elements (image and dragg ...