Why isn't the date on xAxis showing?
I can't seem to find anything wrong.
UPDATE
data: [
[1104966000000, 1.94, 1.99, 1.91, 1.95],
[1104793200000, 1.9, 1.95, 1.9, 1.9],
]
jsfiddle as requested
You can use label formatter and dateFormat
EDIT:
http://jsfiddle.net/sbochan/Usrca/3/
xAxis: {
labels: {
formatter: function () {
console.log(this);
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
}
}
Related
currentDateIndicator seems to only show time of loading the chart. Also currentDateIndicator.label.formatter is called only once (on load).
Highcharts.chart('container', {
xAxis: [{
id: 'bottom-datetime-axis',
currentDateIndicator: {
label: {
format: '%Y-%M-%d, %H:%M:%S',
formatter: function(indicator) {
console.log("currentDateIndicator"); // this is called just once (on load)
return indicator;
},
}
},
How to make currentDateIndicator dynamic showing the current time passing by?
https://jsfiddle.net/ft2ubchk/
The simplest way is to update x-axis every second, for example:
chart: {
events: {
load: function(){
var xAxis = this.xAxis[0];
setInterval(function(){
xAxis.update({});
}, 1000);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/eh5zp36o/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update
so by reading the documents by default when you enable dataLabels on the chart it will render yAxis values, but is it possible to make it render xAxis values?
You can format labels in Highcharts in two ways:
Use dataLabels.formatter where you have access to this (point):
formatter: function () {
return this.x;
}
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/1/
Use dataLabels.format, where you can put simple template:
format: "{x}"
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/
Note:
You can use any property from a point, to show this in a label, both format and formatter can be used:
format: '{point.customValue}'
Or:
formatter: function () {
return this.point.customValue;
}
Where a point is defined as an object:
series: [{
data: [{
x: 10,
y: 15,
customValue: '10x10'
}]
}]
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/3/
Yes it's possible just add this code :
dataLabels: {
enabled: true,
formatter: function() {
return this.x;
}
},
Fiddle
series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.2f}%</b>'
}
}]
d1=[0.12,-1.58,-0.8]
Show in graph 0.00,1.00,0.00
Use the Highcharts.numberFormat function in combination with the formatter function, as Ahmed Sayed noted (see http://api.highcharts.com/highcharts#Highcharts.numberFormat).
For your specific code, you would format it this way:
series: [{
name: 'name',
type: 'spline',
data: d1,
tooltip: {
// format the tooltip to return the y-axis value to two decimal places
formatter: function() {
return this.series.name + ': <b>' + Highcharts.numberFormat(this.y,2) + '%</b>';
}
}
}]
I hope this is helpful for you.
you can use formatter option instead where you provide a javascript function to return the value in the format you need
tooltip: {
formatter: function() {
return getTooltip(this.y);
}
}
I'm using highcharts to display data for over a period of one month so it it could be displaying anywhere form 1 data point to 31 data points (I'm using the jQuery Datepicker widget to select dates). My problem is with the x-Axis. When viewing between 2 and 7 data points the x-axis is automatically trying to adjust itself which works fine the more data points are being rendered but when there are less as previously mentioned there are problems.
I have captured some screenshots showing my perdicament as well as created a JSFiddle. I do have a specific size that I need to fit the chart in and I have used the same size in the JSfiddle.
What I would like ideally is for the x-axis to start on the first of the month (or at the lest NOT start on the end of the previous month) and avoid overlapping issues. I'm hoping it's a setting that I'm overlooking that controls how highcharts "automatically" calculates what is displayed on the x-axis and it's interval. I know there is a tick-interval setting but I've not had any luck with that in my situation.
Image: http://i.imgur.com/p0bQg6U.png
JSFiddle: http://jsfiddle.net/engemasa/sgKcB/
Here is the highcharts code:
$('.chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
labels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat("%b %e, '%y", this.value);
}
}
},
title: {
text: null
},
tooltip: {
formatter: function() {
var date = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br />';
return date + this.y;
}
},
yAxis: {
labels: {
enabled: true
}
},
credits: {
enabled: false
}
});
Assistance is greatly appreciated!
Solution seems to be datetime xAxis and dateTimeLabelFormats option for Highcharts. For example: http://jsfiddle.net/sgKcB/26
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%b %e, '%y",
week: "%b %e, '%y"
}
},
You can use tickPositioner parameter, which allows your own function. You can calculate and return correct order of your ticks.
http://api.highcharts.com/highstock#xAxis.tickPositioner
I found out a problem with chart (highcharts 2.3.5) when i enter datetime series with only 1 data entry, it renders it with incorrect placement on x-axis and wrong point formatting.
here is the example: http://jsfiddle.net/LAcSw/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9]
]
}]
});
});
Is there a fix know or something(it was fine on 2.2.5)?
Since you only have a single point HighCharts is making its best guess as to the yAxis range as well as what the label is on the point for the xAxis.
You are not defining any sort of formatting for the xAxis datetime labels - and HighCharts only has one point to work with so it defaults to time. If you assign a formatter for the xAxis labels you can get it to do what you want.
Here is some rough code to show you what this does:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
},
yAxis: {
min: 0,
max:50
},
And here is your jsFiddle updated.