Highcharts addSeries yAxis Label Formatting - highcharts

I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.
yAxis: {
labels: {
formatter: function () {
var newNumber = formatNumber(this.value, 1);
return newNumber;
}
};
However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.
chart.addSeries({
data: newData,
yAxis: newDataName
});
How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?
Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.
And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.
chart.addAxis({
id: theData,
title: {
text: "newAxis"
}
});

Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):
// New axis
chart.addAxis({
id: 'new',
// Which also has the label formatter
labels: {
formatter: function () {
return formatNumber(this.value, 1);
}
},
title: {
text: "newAxis"
}
});
// New series which uses the axis
chart.addSeries({
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
yAxis: 'new'
});

Related

Format X axis Label of Highcharts

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/

Possible to set dataLabels to display xAxis data instead of yAxis data in HighCharts?

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

highcharts columns too wide with certain data

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
}
}

Highcharts not changing x-axis label on pagination

I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.

Wrong x-axis position and formatting when only 1 data series sent to chart

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.

Resources