ladislav
Posts: 8
Joined: Tue Jun 07, 2022 9:42 pm

Heatmap tooltip + cell color based on value

Hello,

I need help with two issues:

a) how to add to label date - i have a dictionary in Python from which I get data for values (USD value) and axis x (day of week) and axis y (week number). And label has format Number of week, date and value in USD. And from dictionary I would like to add date as second row to label with particular date. Do not know JS, so not able to create a function for that, how to get from my dictionary dates - values for key "date".

b) cell color based value - gradient color red for negative and blue for positive numbers. I used stops, but I have to add stop manually for 0 (white). But I would like to have it automaticly based on values scale from most negative red to most positve blue and 0 as white.

Thanks a lot for any help.

Code for values:

Code: Select all

series: [{
      name: 'Results per WeekDay',
      borderWidth: 1,
      data: [{% for row in qs_heatmap_chart %}[{{ row.x }}, {{ row.y }}, {{ row.value }}],{% endfor %}],
      dataLabels: {
        enabled: true,
        color: '#000000'
      }
    }],
And whole JS code:
https://jsfiddle.net/ladispavel/seuk95yL/10/


Thanks, Ladislav
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap tooltip + cell color based on value

Hello,

To achieve what you described in the first point you can use keys to pass the date with the data that you will display later in the tooltip.

And you can calculate the gradient based on the min and max axes and update it in the chart.events.load() callback with the chart.update() method.

Demo: https://jsfiddle.net/BlackLabel/zeh53crb/
API: https://api.highcharts.com/highcharts/series.line.keys
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... art#update

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ladislav
Posts: 8
Joined: Tue Jun 07, 2022 9:42 pm

Re: Heatmap tooltip + cell color based on value

thanks a lot for help, it is working. Ladislav
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap tooltip + cell color based on value

That's great to hear! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”