I have developed the Highcharts label as much as possible but not able to format as required
https://jsfiddle.net/5ug4wpbz/1/
Please tell me how to format the date and time as shown in the image attached with this.
Expected :
https://ibb.co/WV638L4
You can not use category and datetime axis type together, these are two mutually exclusive values. However, you can achieve the wanted result by using one of them.
For category axis type set pointPlacement to 'between' and xAxis.labels.align to 'left':
xAxis: {
categories: [...],
labels: {
align: 'left'
}
},
series: [{
pointPlacement: 'between',
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/fnsuxt90/
For datetime axis type, you need to use x and y data values or set pointStart and pointInterval properties:
xAxis: {
type: 'datetime'
},
series: [{
pointStart: 1563040800,
pointInterval: 1000 * 60 * 30,
data: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/f1c59a0w/
API Reference:
https://api.highcharts.com/highcharts/series.line.label
https://api.highcharts.com/highcharts/series.line.pointPlacement
https://api.highcharts.com/highcharts/series.line.type
EDIT:
To split the label into two lines, inset <br> tag to a string in labels.formatter function:
xAxis: {
...,
labels: {
formatter: function() {
return this.value.split(' ').join('<br>')
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/vgp46bhw/
Related
I have created a combined line/timeline chart in this jsfiddle:
// arbitrary code snippet required by stackoverflow editor:
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
I would prefer the events to be positioned below the analog value grid rather than as currently, in the middle of it.
Is there any way to achieve this? Thanks in advance!
I can suggest two solutions:
add a second yAxis and set heights for both y-axes:
yAxis: [{
height: '50%'
}, {
height: '50%',
top: '50%'
}],
Demo: http://jsfiddle.net/BlackLabel/e0zhmyr7/
API: https://api.highcharts.com/highcharts/yAxis.height
change the y values for x-range series in the current implementation
Demo: http://jsfiddle.net/BlackLabel/ow1357tq/
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
I created a simple column chart with a datetime xAxis and no other options. If I add simple data [342, 351, ...], it draws as expected, with columns that size to fit the space. However, when I use [x,y] data pairs, [[1481863920000,326],[1481863915000,330],...], the columns become overly wide and overlap each other.
jsFiddle showing issue http://jsfiddle.net/7hoes1p9/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with fat columns'
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [[1481863920000,326],[1481863915000,330],[1481863910000,418],[1481863905000,384],[1481863900000,329],[1481863895000,342],[1481863890000,550],[1481863885000,639],[1481863880000,488],[1481863875000,375],[1481863870000,532],[1481863865000,397],[1481863860000,362],[1481863855000,312],[1481863850000,373],[1481863845000,373],[1481863840000,344],[1481863835000,356],[1481863830000,545],[1481863825000,646],[1481863820000,454],[1481863815000,328],[1481863810000,553],[1481863805000,407]]
}]
});
Do I need to override some default behavior to get proper columns? Is there a minimum column width I need to unset? Does the data need to be added differently? Any help would be appreciated.
When you use a datetime axis with series like columns and bars, you should specify pointRange property. It defines what range of time is valid for a single column.
series: [{
pointRange: 1000,
example: http://jsfiddle.net/7hoes1p9/5/
You need to add the .pointwidth to get the optimum width of the columns as demonstrated here in this fiddle
column: {
pointWidth: 1,
}
or for other options refer to this thread here
Check the following in chart options:
plotOptions: {
series: {
pointWidth: 5
}
}
How do I get HighCharts not to overlap columns in this chart? I have tried all sorts of options. What I would like is for highcharts to set the widths evenly depending on the number data elements in the series, the more the narrower.'
I have specified width: 300 to force the columns to overlap just to show what is happening in narrow chart and only add a few data elements.
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 300,
zoomType: 'x'
},
legend: {
enabled: false
},
series: [{
data: [
[102.0, 66815.0],
[96.0, 77760.0],
[90.0, 68710.0],
[84.0, 69452.5],
[78.0, 48807.5],
[72.0, 35472.5],
[66.0, 24595.0],
[60.0, 17790.0],
[54.0, 18010.0],
[48.0, 5635.0]
]
}]
});
});
http://jsfiddle.net/a0kjogh1/3/
Data should be sorted before you put it into the chart. You receive the error in the console.
data.sort((a, b) => {
return a[0] > b[0];
});
example: http://jsfiddle.net/a0kjogh1/4/
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.