Develop Reference

Apexcharts Heatmap: display exact x value on hover for each series data

I'm trying to create a heatmap using apexcharts that shows frequency of activites each week in a year (Check the github contributions heatmap). My goal is to display a tooltip that shows the specific date, week day, and frequency value whenever the user hovers on a cell. Example:
------------
| 2022-02-20 |
| ---------- |
| Sunday: 40 |
------------
This is what I have attempted so far:
var options = {
series: [],
chart: {
height: 350,
type: 'heatmap',
},
dataLabels: {
enabled: true
},
xaxis: {
labels: {
show: false
},
tooltip: {
enabled: false,
},
},
tooltip: {
shared: false,
followCursor: true,
intersect: false,
x: {
show: true,
format: 'dd MMM'
},
}
};
Here is a simplified sample series:
var series = [
{
name: 'Sunday',
data: [{
x: '2022-02-20',
y: 40
}]
},
{
name: 'Monday',
data: [{
x: '2022-02-21',
y: 0
}]
},
{
name: 'Tuesday',
data: [{
x: '2022-02-22',
y: 5
}]
},
{
name: 'Wednesday',
data: [{
x: '2022-02-23',
y: 100
}]
},
{
name: 'Thursday',
data: [{
x: '2022-02-24',
y: 17
}]
},
{
name: 'Friday',
data: [{
x: '2022-02-25',
y: 4
}]
},
{
name: 'Saturday',
data: [{
x: '2022-02-26',
y: 90
}]
},
];
options.series = series;
What happens here is that the apexcharts displays a heatmap for the week of 2022-02-20 (Sunday) to 2022-02-26 (Saturday) vertically from bottom to top (it seems it displays in reverse order). If the user hovers to the Sunday cell it displays the exact tooltip that I provided at the beginning with the values 2022-02-20, Sunday, and 40. However, when the user hovers on cells Monday - Saturday, the tooltip displays the correct values except for the x value. It still displays 2022-02-20.
From what I understand, the chart treats the first x value in a column as the column's category. This means regardless on whether the user hovers to Saturday, or Friday, or any other day it will display the Sunday's x value. What can I do to display the actual x value of the hovered cell?
Update
Here's a demonstration of the heatmap
Update as of 2022-03-01
As suggested by #Patryk Laszuk, I added
formatter: (value,options)=>{
return options.w.config.series[options.seriesIndex].data[0].x
}
on tooltip.x, however this makes all the cells aligned horizontally have the same x value.

Use formatter https://apexcharts.com/docs/options/tooltip/#xformatter
tooltip: {
...
x: {
...
formatter: (value,options)=>{
return options.w.config.series[options.seriesIndex].data[0].x
}
},
}

HighCharts Axis Formatting in Chrome

I have data that looks like this:
Time,Speed
Mon May 11,21
Tue May 12,34
Wed May 13,12
Thu May 14,12
Fri May 15,45
Mon May 18,34
Tue May 19,56
Wed May 20,67
Thu May 21,78
I am trying to plot this on a HighCharts line chart with the speed on the y-axis and the time on the x-axis. I would like to keep my time labels as they are in the data. This works in Firefox and Edge. However, Chrome is trying to translate the time into a date value so it messes up the format of the labels. How do I get around this so I can keep my Axis labels the way they exist in the raw data.
var csv = {this is my data};
var options = {chart: {
backgroundColor: '#f6f6f6',
type: 'line',
style: {
fontFamily: 'Arial'
},
borderWidth: 1,
borderColor: "#ddd",
borderRadius: "5",
zoomType: "xy",
renderTo: 'chartContainer',
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
}
data: {
csv: data
},
title: {
text: chartTitle
}
}};
var chart = new Highcharts.Chart(options);
}

Use category axis type:
xAxis: {
type: 'category',
...
}
Live demo: http://jsfiddle.net/BlackLabel/25ypbo1e/
API Reference: https://api.highcharts.com/highcharts/xAxis.type

highcharts - show by month

highcharts by month no correct label, when is one month.
when is 2 month the label in xAxis is jan-2016 and feb-2016 but when is only one month the label is 04:59:59:999
normal: https://jsfiddle.net/rcondori/c3y1r7sn/
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}, {
name: "February",
x: 1454302799999,
y: 60
}]
}
]
bad: https://jsfiddle.net/rcondori/c3y1r7sn/1/
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}
]
help me please.

You can use the following options:
Option 1
Use Highcharts API (check example):
Highcharts.dateFormat allows you to set up the date format (for more details check this link)
labels: {
formatter: function() {
return Highcharts.dateFormat('%B-%Y', this.value);
}
}
Option 2:
Using JS method:
Check below
var temp = new Date(this.value);
locale = "en-ca",
month = temp.toLocaleString(locale, {
month: "long"
});
return month + '-' + temp.getFullYear();
By setting the variable temp as new Date (this.value), you have access to the x value (in this case the date).
month=a.toLocalString allows you to get the month on letters instead of numbers.
Here the example:
$(function() {
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
var temp = new Date(this.value);
locale = "en-ca",
month = temp.toLocaleString(locale, {
month: "long"
});
return month + '-' + temp.getFullYear();
}
}
},
series: [{
data: [{
name: "January",
x: 1451624399999,
y: 52
}]
}
]
});
});

Correctly plot time series in Highcharts/Highstock

I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.

What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);

Highcharts load pointStart from JSON. Milliseconds to UTC time?

I made a graph with Highcharts which series is loaded from JSON.
I am bit new to handle JSON file though...
I want Highcharts to show date (in formart: YYYY/MM/DD ie.2013/04/01) on label of xAxis.
As far as I know, since I cannot write something like this in JSON,
"pointStart": [Date.UTC(2013, 4, 1)]
I wrote milliseconds instead.
My JSON:
[
{
"yAxis": 0,
"type": "column",
"name": "Y label",
"data": [0,0,153,179,122,126,120,101,110,95,142,88,82,92,115,101,141,162,0,0,0,0,0,7,6,0,10,0,9,4,56,86,66,61,87,72,74,60,83,74,50,73,61,56,90,78],
"pointStart": 1364774400000,
"pointInterval": 86400000
},{
"yAxis": 1,
"type": "line",
"name": "Y label 2",
"color": "#AA4643",
"data": [4980,4572,5554,6147,5268,5221,5263,5084,4906,5000,5198,4777,4790,4549,4158,4294,4891,4689,4432,3925,3708,3723,3623,3831,3787,4353,4809,5046,4989,4815,4315,4556,4502,4725,4537,4540,4654,4367,4589,4874,4837,5032,5046,4633,4561,4576],
"pointStart": 1364774400000,
"pointInterval": 86400000
}
]
And my javascript:
var options = {
chart: {
renderTo: 'container'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y/%m/%d'
},
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d', this.x); //this returns invalid date.
}
},
title: {
text: ''
}
},
...
$.getJSON('test.json', function(data) {
options.series = data;
chart = new Highcharts.Chart(options);
});
This results invalid date on xAxis label.
But if I remove this part
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d', this.x);
}
returns no error but results like 1. Apr which I do not desire to show :(
Any solution to this?
Thank you.

I came up with solution as follows:
dateTimeLabelFormats: {
day: '%Y/%m/%d'
},
labels: {
rotation: -45,
align: 'right',
formatter: function() {
var _date = new Date(this.value),
_y = _date.getFullYear();
_m = _date.getMonth() + 1,
_d = _date.getDate(),
_result = _y + '/' + (_m < 10 ? "0"+_m : _m) + '/' + (_d < 10 ? "0"+_d : _d);
return _result;
}
},
...
put milliseconds value to Date object in which I was able to handle value w/ such methods as getFullYear(), getDate().
Thanks.

You have the date/time format wrong. It's not day: '%Y/%m/%d', it needs to be day: '%Y/%y/%e' see dateTimeLabelFormats Highcharts API reference.

You can use http://api.highcharts.com/highcharts#xAxis.labels.formatter and Highcharts.dateFormat() http://api.highcharts.com/highcharts#Highcharts.dateFormat()
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y/%m/%d',this.value);
}