I need to make a chart on which xAxis is of type 'datetime', but have irregular intervals:
http://jsfiddle.net/cz6rL/
this is the code:
$(function () {
$('#chart1').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Incomes/Outcomes'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
minRange: 15 * 24 * 3600000,
title: {
text: null
}
},
yAxis: {
title: {
text: 'Euro(€)'
}
},
tooltip: {
shared: true
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[9]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
//lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2014, 0, 01),
data: [["31/12/2013", 345.2], ["09/01/2014", 494.79999999999995], ["20/01/2014", 137.2], ["22/01/2014", 210.0],
["23/01/2014", 220.4], ["24/01/2014", 871.0], ["28/01/2014", 420.0], ["30/01/2014", 420.0], ["31/01/2014", 2057.15],
["05/02/2014", 191.2], ["06/02/2014", 81.6], ["07/02/2014", 295.2], ["11/02/2014", 135.12], ["12/02/2014", 189.2],
["13/02/2014", 210.0], ["14/02/2014", 315.2], ["17/02/2014", 462.79999999999995], ["18/02/2014", 544.4],
["19/02/2014", 715.4399999999999], ["20/02/2014", 971.2], ["21/02/2014", 418.0], ["02/02/2015", 366.0]]
}]
});
});
you can see that series values do not correspond to xAxis values. How can I fix it: having same days on xAxis or having months corresponding to series values days?
thanks
Luke
You can remove the pointStart assignment, highcharts will determine the range based on trhe values you provide it. Highcharts will take a look at the range of data you supply it and auto generate the tick marks based on your tickInterval settings, and the available dimensions of your chart. If you need the tick marks on the axis to be specifically the dates you have in you data, you should not used the datetime type axis.
Highcharts handles all date data value in unix/epoch time (number of seconds since 1/1/1970). If you want to use datetime axis, you must supply your data in that format.
Change all your date values such as
["31/12/2013", 345.2]
to
[Date.UTC(2013, 11, 31), 345.2]
Related
Let´s say you have an x-axis that goes [0, 3, 6, ...] and a y-axis that is like [0, 5, 10, ...].
Highcharts handles those values so that automatically, somehow a difference of 5 in y direction does not look bigger than a difference of 3 in x direction.
How can you change the distances between the values / make a 5 on the y axis appear as big as 5/3 of the change on the x axis? (so that p.e. a line from (0,0) to point (5,5) has a 45° angle)
Code example:
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
taken from demo
In the load event, you can calculate and adjust the height or width of the chart:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/64Lxutce/
or if you do not want to change the size, you can adjust one of the axis extremes:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/w3byrL28/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I have been working on a project that uses highchart to draw multiple line charts. With that, I have already achieved some configuration (eg. x-axis crosshair, fixed tooltip, zooming) for my chart in accordance to the business requirements. As such, one requirement is that when x-axis crosshair moves from left to right (or vice versa) within the plotted chart, the selected values on y-axis and dates and time on x-axis will be displayed in the fixed tooltip.
Example:
Series CDT158 has a value of 100.46 (as shown in Chart 1) on 27 Apr 2017 20:49:48 pm. When I move the x-axis crosshair to the right, it jumps directly to the next point which has a value of 103.47 (as shown in Chart 2) on 27 Apr 2017 20:50:38 pm.
Is it possible when the crosshair passes through the series (from one point to the next point), the y-axis values between 100.46 and 103.47 as well the datetime values on x-axis will be rendered in the fixed tooltip? I also want to display the CDEP158 y-axis values simultaneously in the fixed tooltip. How can I achieve this?
[Chart 1]
[Chart 2]
This is the Highchart initialization.
myChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
plotBorderWidth: 1
},
title: {
text: ''
},
legend: {
layout: 'horizontal',
align: 'left',
itemDistance: 10,
borderWidth: 0,
itemMarginTop: 0,
itemMarginBottom: 0,
padding: 20
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
dataLabels: {
enabled: false,
format: '{y}'
},
allowPointSelect: false
}
},
xAxis: {
type: 'datetime',
labels: {
rotation: -65,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
},
crosshair: true,
dateTimeLabelFormats: {
second: '%d %b %Y <br/> %H:%M:%S %P',
}
},
yAxis: {
gridLineColor: '#DDDDDD',
gridLineWidth: 0.5
},
tooltip: {
positioner: function () {
return {
x: this.chart.plotLeft,
y: this.chart.plotTop
}
},
useHTML: true,
formatter: function (tooltip) {
var formattedDate = Highcharts.dateFormat('%d %b %Y <br/> %H:%M:%S %P', new Date(this.x));
const header = `<span style="font-size: 8px">${formattedDate}</span><br/>`;
let body = this.points.reduce((body, p) => body + `<small><font color="${p.series.color}"><strong>${p.series.name}</strong></font>: <strong>${p.y}</strong></small><br/>`, '');
return header + body;
},
shared: true,
valueDecimals: 2,
//followPointer: true,
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [{
name: 'CDT158',
data: [
[1493326164493, 87.54],
[1493326174018, 97.09],
[1493326188245, 100.46],
[1493326238635, 103.47],
[1493326284930, 106.12]
]
},{
name: 'CDEP158',
data: [
[1493326165993, 94.34],
[1493326174772, 88.87],
[1493326188895, 98.25],
[1493326272411, 96.48],
[1493326299520, 100.13]
]
}]
});
I'm pretty sure that this can be achieved through Highcharts but, my limited knowledge and experience in Highchart stops me to figure it out.
I have posted a sample fiddle that illustrate the above scenario.
Any help is greatly appreciated.
Trying to got temp data from 1895 and upward to display on highcharts. The issue is that the xAxis is incorrect. How do I get this to display correctly (tick for each year increasing to the right)?
$('.cchighchart').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: null
},
xAxis: {
type: 'datetime'
},
yAxis: [{
title: {
text: 'Average Temperature (F)'
}
}],
series: [{
name: 'Average Temperature',
width: 3,
zIndex: 1,
yAxis: 0,
data: [
["1895", 42.441666666667],
["1896", 44.875],
["1897", 44.033333333333],
["1898", 42.716666666667],
["1899", 43.183333333333],
["1900", 45.408333333333],
["1901", 45.116666666667]
]
}]
});
http://jsfiddle.net/deadpickle/ZAqzj/
For datetime, you need your x-axis data to be in unix epoch time. This can be done fairly simply like this:
data: [
[Date.UTC(1895, 0, 1), 42.441666666667],
[Date.UTC(1896, 0, 1), 44.875],
[Date.UTC(1897, 0, 1), 44.033333333333],
[Date.UTC(1898, 0, 1), 42.716666666667],
[Date.UTC(1899, 0, 1), 43.183333333333],
[Date.UTC(1900, 0, 1), 45.408333333333],
[Date.UTC(1901, 0, 1), 45.116666666667]
]
See here
Alternatively, if you don't actually really need this to be a datetime axis (which if all you data is yearly, you really don't), you can just remove the type from your xaxis and change your years to numbers (rather than strings) and it will plot just fine:
data: [
[1895, 42.441666666667],
[1896, 44.875],
[1897, 44.033333333333],
[1898, 42.716666666667],
[1899, 43.183333333333],
[1900, 45.408333333333],
[1901, 45.116666666667]
]
See here
I was toying around with the Logarithmic Scale in Highcharts.
Noticed that the zoom behaves in a weird manner when close to minValue.
The fiddle here is a slightly modified example of the original fiddle that Highcharts had for demonstrating a line chart over log scale.
Here is the code in full for a column chart that utilizes a log scale.
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType:'xy'
},
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
Try zooming between .1 and 1 and you'll see that everything disappears but the chart seems to have zoomed somewhere.
Is there an explanation for this behavior?
You need to set minRange parameter
yAxis: {
type: 'logarithmic',
minRange:0.1,
minorTickInterval: 0.1
},
http://jsfiddle.net/G6ALa/1/
$(function () {
$('#container').highcharts({
chart: {
showAxes : true,
type: 'line',
marginRight: 130,
marginBottom: 25
},
tooltip: {
crosshairs: [true],
shared : true
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
type :'datetime',
tickInterval : 12*30*24*3600* 1000,
min : Date.UTC(2011, 0, 1),
max : Date.UTC(2020, 0, 1),
label : {
align : 'left'
}
},
yAxis: {
title: {
text: 'PRICE Rs. / SQ.FT.'
},
lineWidth: 2,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
});
});
My x-axis having Years and data series having information which i want to show on Y axis.
When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards.
http://jsfiddle.net/R8kx7/3/ here is the link
Based on your comments to #SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.
plotOptions: {
series: {
pointStart: Date.UTC(2011, 0, 1),
pointInterval : 12*30*24*3600* 1000
}
},
series: [{
data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
}]
Updated fiddle here.
Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.
Firstly, you could specify x values in your data points e.g.
{x:Date.UTC(2011, 0, 1),y:2165}
Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:
categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
The second option is probably a bit simpler http://jsfiddle.net/K6xxz/