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
}]
}
]
});
});
Related
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
}
},
}
I am trying to create a line chart where the x-axis is in the format of "Month Year" (ex Jun 2014), but instead of showing the month of the actual data point the ticks are all showing as **Jan** and the labels don't match up with the plot points.
I am expecting there to be 3 XLabels for Jun 2014, Jun 2015, Jun 2016 but instead, there are only 2 labels for Jan in between.
var data1 = [{
x: '06/01/2014',
y: 1853
}, {
x: '06/01/2015',
y: 5087
}, {
x: '06/01/2016',
y: 3078
}];
data1.forEach(function(el, i) {
data1[i].x = new Date(el.x).getTime();
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function(){
return Highcharts.dateFormat("%b %Y", this.value)
}
}
},
series: [{
name: 'Data',
data: data1
}]
});
Fiddle
You can take advantage of tickPositioner:
xAxis: {
tickPositioner: function() {
return this.series[0].xData;
},
...
}
Live demo: http://jsfiddle.net/BlackLabel/of7k0vxh/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
For me, dateTimeLabelFormats showing inconsistent date-format based on the time selection.
Below is the URL
http://jsfiddle.net/46bk7pvm/2/
In above URL, when I select 6 month it is reflecting with proper date format. Which is '%Y-%m'. But when I select 1 Month or 3 Months it is reflecting with day: '%Y<br/>%m-%d', format. But it should be Month format which is month: '%Y-%m'.
In short for month selection it should be
month: '%Y-%m',
for day selection it should be
day: '%Y<br/>%m-%d',
and for year it should be
year: '%Y'
Here is the code block
Highcharts.stockChart('container', {
xAxis: {
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'
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
How can we set above dateformat dynamically based on the time period selection.?
dateTimeLabelFormats defines format for xAxis ticks according to the distance between closest of them. When you click 1M, then you have only four weeks of data so if there will be room only for four dataLabels then week format will be applied. If you have more space (wider chart) then day format will be used etc.
What you want is probably to change format on labels after button click: http://jsfiddle.net/BlackLabel/wxpfc2k5/
Snippet (only 1M button!):
rangeSelector: {
selected: 1,
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function() {
chart.xAxis[0].update({
labels: {
format: '{value:%Y-%m}' // change format on click
}
});
}
}
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
}
More about label formatting can be found in the API and docs.
Thanks, Paweł Fus for your suggestion on formatter.
I solved my problem by assigning date-format to formatter. Here is the code.
labels: {
overflow: false,
align: "center",
style: _xaxis_label_style,
step: _step,
staggerLines: _staggerLines,
x: 0,
enabled: true,
useHTML: term_useHTML,
formatter: function () {
if ($j(".hdnSelection").val() == "today") {
return Highcharts.dateFormat(dateformatlable.hour, this.value);
}
else {
var key = "1month"; //default case
if (typeof $j('.hdnSelectionmonth') !== "undefined" && $j('.hdnSelectionmonth').val() != '') {
key = $j('.hdnSelectionmonth').val();
}
var duration = key.substring(1);
switch (duration.toLowerCase()) {
case "day":
return Highcharts.dateFormat(dateformatlable.day, this.value);
case "week":
return Highcharts.dateFormat(dateformatlable.week, this.value);
case "month":
return Highcharts.dateFormat(dateformatlable.month, this.value);
case "year":
return Highcharts.dateFormat(dateformatlable.year, this.value);
break;
case "ytd":
return Highcharts.dateFormat(dateformatlable.year, this.value);
default:
return Highcharts.dateFormat(dateformatlable.day, this.value);
}
}
}
},
showLastLabel: true
You can get selected unitName from tickPositionInfo and apply it in the label formatter:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const format = {
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'
}[this.tickPositionInfo.unitName];
return Highcharts.dateFormat(format, this.value);
}
}
}
My serialization method results a datetime string like this: "2014-07-09T12:30:41Z"
Why the following code does not work?
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: [
{x:"2014-07-09T12:30:41Z",y: 29.9},
{x:"2014-09-09T12:30:41Z", y:71.5}
],
name: "Teste"
}]
});
});
this code work perfectly:
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: [
{x:Date.UTC(2014, 0, 1),y: 50},
{x:Date.UTC(2014, 2, 1), y:20}
],
name: "Teste2"
}]
});
});
How to convert datetime format or configure highcharts to work with my data?
Apparently Highcharts must be expecting the date as the number of milliseconds since "January 1, 1970, 00:00:00" universal time, that's what Date.UTC() retrieves, so you can accomplish the same thing doing this:
series: [{
data: [
{x:(new Date("2014-07-09T12:30:41Z")).getTime(),y: 29.9},
{x:(new Date("2014-09-09T12:30:41Z")).getTime(), y:71.5}
],
name: "Teste"
}]
You can preprocess your data before using it in chart. Example - http://jsfiddle.net/Jx5n2/3851/
var data = [{
x: "2014-07-09T12:30:41Z",
y: 29.9
}, {
x: "2014-09-09T12:30:41Z",
y: 71.5
}],
len = data.length,
i = 0,
outData = [];
for (i = 0; i < len; i++) {
outData[i] = {
x: Date.parse(data[i].x),
y: data[i].y
}
}
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [{
data: outData
}]
});
});
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);
}