I have a line chart with xAxis as follows:
'xAxis' : {
'type' : 'datetime',
'labels' : {
'rotation' : -90,
'align' : 'right',
'y' : 1
},
'dateTimeLabelFormats' : {
'day' : '%e-%b',
'week' : '%e-%b',
'month' : '%b-%y'
}
}
But it shows not only day/month but also hours. Is there a way to hide hours here?
I think you should consider minTickInterval to set it to one day - otherwise Highcharts will calculate interval, and set it for example to a half day (like you have in your case). If there wouldn't be 12:00 labels, then you will receive doubled labels. Of course other answer will resolve issue with displaying 12:00, but wouldn't prevent displaying extra labels.
Reference: http://api.highcharts.com/highcharts#xAxis.minTickInterval
What format do you want it in? You can put it in the format of 'day' of 'month' by doing something like this.
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
You can use label formatter and highcharts.dateFormat
Related
Here is a jsFiddle to my issue:
Highcharts.chart('container', {
xAxis: {
categories: [full arrray in fiddle],
labels: {
step: 1
}
},
series: [{
data: Array.from(Array(690).keys())
}]
});
https://jsfiddle.net/qws90dux/
The chart seems to only take the first and last label, why is this?
I think the reason this did not work is because of the amount of time needed to process each category which are long dates, this is basically what is written here
The solution was just to use xAxis.tickInterval instead, with the same interval as before.
In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner
I have sample of array data below :
[
[10,10.23],
[23,58.55],
...,
[-30,170.66],
...,
[-13,3433.36],
...,
[4,47449.77],
...
]
When I generate them to graph, the xaxis label was set to :
0, 5k, 10k, 15k, 20k, 25k, 30k, etc
I would like to set step for xaxis label like :
0, 10, 100, 1000, 10000, 100000
or in logic code equal to :
Math.pow(10,step+1)
I read the Highchart API, never found the solution for this step method. Is there a trick to do that?
Thank you,
Mahdi
I think you are looking for
xAxis: {
type: 'logarithmic',
labels: { //for if you want to hide the 'k' abbreviation for thousands
'{value}'
}
},
See the HighCharts demo on logarithmic charts for more details.
I am using highcharts to perform sensor graphing for basic temperatures, or things of that nature. The issue is I have the current default view set at 3 days, but at that view it distorts the y axis data values.
For example, if the majority of the data is 1.5 but there is a value of 10 also, in the three day view the y axis is only showing a range up to 3 or 4. It shows the spike in the actual line graph however when you hover over the point the value is 3 or 4 instead of 10. However, if I shrink the view to 2 hours, the data gets displayed properly and the value then returns to 10 and the y axis accomodates the 10 value.
Also I am having issues with the data being rounded down constantly it seems, since the values should be a steady 1.5 it is constantly being rounded down to 1.
Any help will be appreciated and I will be around the computer all day to answer any questions that someone might have about this issue.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis : {
minRange: 600 * 1000 // one hour
},
yAxis : {
title : {
text : '<?echo $unit;?>'
}
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
}, {
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : 'Voltage',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
This is the example of how the data is skewed. The high points to the right are 10, and 13 yet they show up at only 3.
Have a look at dataGrouping as it lets you determine how to group or to have it off completely. It defaults to enabled.
Have you tried to use numberFormat() http://api.highcharts.com/highstock#highcharts.numberFormat()
I've been burned by the auto-rounding; the chart does some sort of value rounding for its internal representation of points.
I only have a workaround - I got around it by storing the data points in a separate array and referencing THAT in the tooltip function.
As of note, if you're using column data and don't turn data grouping off, the chart will round your X values too.
Which I am passing to:
series: [{
name: 'Fixed bugs',
data: fixed,
pointWidth: 40
}, {
name: 'Assigned Bugs',
data:assigned,
pointWidth: 40
}, {
name: 'Re-Opened Bugs',
data: Reopened,
pointWidth: 40
},
{
name: 'Closed Bugs',
data: closed,
pointWidth: 40
}]
to this chart and I have the data like this :
data: fixed=[3,5,5,8]
data:assigned=[0,1,0,0]
and follows. Now I want to show the column with zero value to... For me its not showing the column value with zero.
minPointLength will work. Use this.
plotOptions: {
column: {
minPointLength: 3
}
}
You can do this quite simply with the minPointLength option. It sets the minimum number of pixels per column, default is 0, so zero values don't show up. It's in the docs here.
Try this JSFiddle
Here is a way to do it - although I think just having the column be zero-valued and not visible is the best way.
Find a very very low number that none of your data points would ever have but still keep it >0. Let us say it is .005. When you bring in your data any value that is 0 assign it this .005 value. In your tooltip formatter do an IF on the value. If it is .005 then make it 0. This way you get to see the "zero" column but the tooltip displayed will be 0 as well. If you are doing any kind of calculation on the stacked columns then you need to account for this non-0 0 value in there as well.
Not sure what you are trying to display, but maybe you could try to show the datalabels like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'gray'
}
}
}
Attempt at demo