Please tell me what the problem is, constantly displays 01.01.xxxx, although in the tooltip correct date.
jsfiddle
$('#container').highcharts({
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d %m %Y', this.value);
}
},
},
series: [{
name: 'reg',
data: [[1392760800000, 60], [1420149600000, 3]] // 1392760800000 - 18.02.2014, 1420149600000 - 02.01.2015
}, {
name: 'app',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'dec',
data: [[1392760800000, 0], [1420149600000, 0]]
}, {
name: 'deac',
data: [[1392760800000, 60], [1420149600000, 3]]
}]
});
Axis labels are displayed not for columns but for beginning of years because of size of chart and scale of x axis.
You could fix that i.e. by setting positions for x axis ticks.
Example: http://jsfiddle.net/awhr7y74/2/
For this you can use tickPositions (used in example) or alternatively - tickPositioner.
See API for more information - http://api.highcharts.com/highcharts#xAxis.tickPositioner
Related
I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
I have use highcharts series type 'flag' and have some data points.
I have a situation when my data points list from e.g. [-100;100]
But some flags value are out of this range. I cannot find any solution do show these flags which out of range.
The flag is not located on the line series because the x value is outside the range:
series: [{
id: "data",
data: [
[1569269259533, 100],
[1569269319534, 100]
]
}, {
type: 'flags',
useHTML: true,
y: -18,
id: 'flags',
onSeries: 'data'
}],
chart: {
events: {
load: function(e) {
var flagSerie = this.get('flags');
flagSerie.setData([{
x: 1569269299533,
count: 3
}]);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/rmonx6Lz/
API Reference: https://api.highcharts.com/highstock/series.flags.onSeries
I'm using Highcharts with hebrew names. When I have negative values, the tooltip display the minus sign (-) on the right side.
tooltip display
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'שרה',
data: [5, 3, -4, 7, -2]
}, {
name: 'שי',
data: [2, -2, -3, 2, 1]
}]
});
});
jsfiddle
How to display it on the left side?
Thanks for your help.
check out this fiddle
http://jsfiddle.net/mooioom/upcq96k5/
A general useful tip for all numeral-direction-problems in RTL languages is to
apply direction:ltr and display:inline-block on the element which is wrapping the number.
in this specific case you also need to add tooltip : { useHTML:true } on the highcharts object in order for highcharts to render the tooltip using html (and not svg) ...
I am creating a column chart with Highcharts and I want to stack the values by time. So the xAxis is of type datetime. This is my config (omitting the less important configuration options):
var chartOptions = {
title: {
text: null
},
chart: {
type: 'column',
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
series: [
{
name: "test",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573200000, 7]]
},
{
name: "test_1",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573201000, 9]]
}
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
}
}
If the date sent is identical then the stacking is working right but if there is a second of difference, then it's not stacking well, like the third column in the following image:
It's a bit weird because it's showing the numbers. Is there any option for increasing the stacking range to minimum one second or something like that?
Fiddle: Code
I want to have bar chart start from a specific time (1.Apr)
So I implemented this in below sample:
(jsFiddle) sample with axis right but can the bar disappear
With the code below
yAxis: {
type: 'datetime',
min:Date.UTC(2010, 3, 1)
},
yAxis actually start from 1.Apr, but I can not see the bar itself .
If I remark the min line as below
yAxis: {
type: 'datetime'
//min:Date.UTC(2010, 3, 1)
},
Now I can see the bar appear, but the yAxis default show from 1.Jan.
Can anyone help me make the bar visible and yAxis starting from 1.Apr ?
I think I found what you're searching.
There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :
yAxis: {
type: 'datetime',
min: Date.UTC(2010, 3, 1)
}
Hope it's what you're searching. Chears from a bear.
Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:
series: [{
name: 'UP',
color: 'lime',
data: [{
x: 1,
y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
// or:
// y: 1433120400000
// is the same as above use for Date.UTC()
}]
}]
Live demo: http://jsfiddle.net/v9582phy/4/
Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)
return moment(x).format('MMM/DD HH:mm:ss')
}
}
},
with series data as
series: [{
data: [{
status:'studying',
color: 'lime',
x: 1,
y: 5
}, {
status:'playing guitar',
color: 'yellow',
x: 2,
y: 10
}, {
status:'exam',
color: 'red',
x: 2,
y: 23
}]
}]
And I got stacked bar which each bar present how many minutes for lasting status
Live demo: http://jsfiddle.net/v9582phy/11/