Develop Reference

Chart JS Custom Labels don't work

I am trying to truncate the labels on my horizontal bar chart but can't seem to get the callback to actually work.
yAxes: [{
maxBarThickness: 50,
gridLines: false,
ticks: {
padding: 10,
callback: value => {
let new_label = null;
if (value.length > 15) {
new_label = value.substring(0, 15) + '...';
} else {
new_label = value;
}
return new_label;
},
},
}],

To achieve expected result, use below option of changing value to string using toString() and then just return value bases on length
callback: value => {
if (value.toString().length > 15) {
return value.toString().substr(0, 15) + '...'; //truncate
} else {
return value
}
}
code example for reference - https://codepen.io/nagasai/pen/zaLVeO
Note: Check the padding values in the options, check this link for more details - Chart.js y axis labels are truncated incase of missing truncated values due to padding

jqxChart with relative values

I was playing around with the waterfall series of the jqxChart.
According to its API, the following piece of code defines the values of the axis, in this case it's the y-axis:
valueAxis:
{
title: {text: 'Population<br>'},
unitInterval: 1000000,
labels:
{
formatFunction: function (value) {
return value / 1000000 + ' M';
}
}
}
Is it possible to define the intervals not with absolute values, but with relative values. So that the interval are e.g. 10% and the overall value is 100%?
Simply doing unitInterval: '10%' doesn't work.
This is how it should look like:
Here is a fiddle.

I think you're looking for these options :
logarithmicScale: true,
logarithmicScaleBase: 1.10,
Example:
valueAxis:
{
title: {text: 'Population<br>'},
logarithmicScale: true,
logarithmicScaleBase: 1.10,
labels:
{
formatFunction: function (value) {
return value / 1000000 + ' M';
}
}
},
Edit:
var accuracy = 2;
var first = data[0].population;
var last = data[data.length - 2].population;
var unit = (100 / last);
// convert raw data to differences
for (var i = 0; i < data.length - 2; i++)
data[i].population = (data[i].population * unit).toFixed(accuracy);

Highcharts grouped column labels

I have a highcharts grouped column chart with two columns for each value on the x axis. i would like to be able to add a label above each group with difference between the two in percent. I cant seem to find any way to reference the two columns in the formatter-option.
This is the section I'm having trouble with:
column: {
dataLabels: {
formatter: function()
{
return this.y;
}
}
}
Where this.y should be the difference.
This is how it is at this time http://jsfiddle.net/LLExL/4548/
All i want changed from this is a label above each of the two columns with a percent difference.

Inside the formatter callback you can use the series.chart.series[1].yData property to get the y values of the second column/series. yData is an array of all the y values. Then you can use the point.index property to get the corresponding point of the second column/series.
column: {
dataLabels: {
formatter: function()
{
var firstColumnValue = this.y;
var secondColumnValue = this.series.chart.series[1].yData[this.point.index];
var yourCalculation = (firstColumnValue - secondColumnValue) / firstColumnValue * 100;
return yourCalculation.toFixed(2) + '%';
}
}
}
Updated JSFiddle

One possibility is to pre-calculate all the differences, and simply reference them in your formatter. For example, define your series in a variable, and loop over it to create a separate diffs array of the differences, like this:
var series = [{
name: 'Omsetning',
data: [
// ...
]
}
// ...
];
var diffs = [];
for(i = 0; i < series[0].data.length; i++) {
var v1 = series[0].data[i].y;
var v2 = series[1].data[i].y;
diffs.push( (Math.abs(v1-v2) / ((v1+v2) / 2)) * 100 );
}
$('#container').highcharts({
plotOptions: {
column: {
dataLabels: {
formatter: function()
{
return Highcharts.numberFormat(diffs[this.x])+"%";
}
}
}
}
series: series
// ...
});
See this JSFiddle demonstration of how it looks.

highchart with numberformat (unit)

I'm using Highcharts to generate a line chart.
And I'm having a problem with numberFormat:
var test = 15975000;
numberFormat(test, 0,',','.');
the result is: 15.975.000
But I want to transform 1000 to 1k, 100000 to 100k, 1000000 to 1m like this.
How can I deal with this problem?

numberFormat is available in Highcharts object.
Highcharts.numberFormat(test, 0,',','.');
Example http://jsfiddle.net/DaBYc/1/
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value,0);
}
}
},

Write your own formatter (see this example).
formatter: function() {
result = this.value;
if (this.value > 1000000) { result = Math.floor(this.value / 1000000) + "M" }
else if (this.value > 1000) { result = Math.floor(this.value / 1000) + "k" }
return result;
}
See also: How to format numbers similar to Stack Overflow reputation format

You just need to do that:
labels: {
formatter: function() {
return abbrNum(this.value,2); // Need to call the function for each value shown by the chart
}
},
Here is the Function used to transform the data to be inserted on javascript:
function abbrNum(number, decPlaces) {
// 2 decimal places => 100, 3 => 1000, etc
decPlaces = Math.pow(10,decPlaces);
// Enumerate number abbreviations
var abbrev = [ "k", "m", "b", "t" ];
// Go through the array backwards, so we do the largest first
for (var i=abbrev.length-1; i>=0; i--) {
// Convert array index to "1000", "1000000", etc
var size = Math.pow(10,(i+1)*3);
// If the number is bigger or equal do the abbreviation
if(size <= number) {
// Here, we multiply by decPlaces, round, and then divide by decPlaces.
// This gives us nice rounding to a particular decimal place.
number = Math.round(number*decPlaces/size)/decPlaces;
// Handle special case where we round up to the next abbreviation
if((number == 1000) && (i < abbrev.length - 1)) {
number = 1;
i++;
}
// Add the letter for the abbreviation
number += abbrev[i];
// We are done... stop
break;
}
}
return number;
}
Hope this works =)

In case you want to format a Highstock chart:
tooltip: {
pointFormatter: function() {
var result = this.y;
let header = '<table>';
let body = '<tr><td style = "color: ' + this.series.color + ';padding:0">'
+ this.series.name + ': </td><td style = "padding:0"><b>';
if (result > 1000000) {
result = Math.floor(result / 1000000) + "M"
}
else if (result > 1000) {
result = Math.floor(result / 1000) + "k"
}
return header + body + result + '</b></td></tr></table>';
}
},
I had trouble finding a way of adding Millions and Thousands while not hampering the data grouping functionality or the date.

Flowing Merge of points with same x-axis in the same series

I am currently using highstock to plot the total number of items available based on time throughout the day (which then updates real-time).
If two changes to the total number of items happens at the same time, in highstock I get a vertical bar of the difference:
So in my example image we start with 4299 things, then 53 items are removed and 50 are added (technically at the same time, but are two different transactions and are two points). With a net difference of -3. (or in otherwords, I get {x: 5:44:15 and y: 4246, change: -53}, {x: 5:44:15, y: 4296, change: 50}).
So my question:
Is it possible in highstock to merge those points to get rid of the vertical bar and use 4296 as the shown value? I was hoping I could then use the tooltip formatter to loop through 'this.points' and display a change of -53 and a change of 50 in the tooltip so the user can see what resulted in a net change of -3.
If this is not possible, I will just merge the points myself and pass all the relevant information in the point to generate the tooltip (and chart look) that I am going for, but wanted to see if I could just utilize all the functionality of highstock first - and keep these points separate.
Thanks!
Edit::
new Highcharts.StockChart({
chart : {
renderTo : 'realTimeChart',
zoomType: 'x',
backgroundColor: '#feffdd',
style: {
fontFamily: 'Segoe UI'
},
type: 'spline'
},
plotOptions: {
area: { animation: false },
arearange: { animation: false },
areaspline: { animation: false },
areasplinerange: { animation: false },
bar: { animation: false },
column: { animation: false },
columnrange: { animation: false },
gauge: { animation: false },
line: { animation: false },
pie: { animation: false },
scatter: { animation: false },
series: { animation: false },
spline: { animation: false }
},
xAxis: {
ordinal: false
},
tooltip: {
animation: false,
formatter: function() {
var p = '';
p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M:%S', this.x) +'</span><br/>';
$.each(this.points, function(i, point){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
if (point.point.where) {
p += '<br />' + point.point.where + ' changed by ' + point.point.change + (point.point.who ? ' (' + point.point.who + ')' : '');
}
});
return p;
}
},
rangeSelector: {
buttons: [{
count: 30,
type: 'minute',
text: '30M'
}, {
count: 1,
type: 'hour',
text: '1H'
}, {
count: 6,
type: 'hour',
text: '6H'
}, {
type: 'all',
text: 'Day'
}],
inputEnabled: false,
selected: 1
},
exporting: {
enabled: false
},
series : [{
name : 'Available',
data : data,
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}]
Data is in the format I showed previously, except the x is actually in milliseconds since epoch:
data = [
{x: 123456789, y: 2000, where: 'Location', change: 40, who: 'Joe'},
{x: 123456789, y: 1960, where: 'Location', change: -40, who: 'Bob'},
...
];

Just wanted to follow up with how I easily got around the probem. Instead of placing by second, I decided to group points together to the nearest minute rounding down (so I have blocks of minutes).
Then for each point I passed in an array of the actual points contained within that minute block as a new argument, and updated the y value for that minute block. Then I used the tooltip formatter to display all the changes within that minute block with their actual time of change. This gave me a more flowing graph instead of all these hard vertical points for the same x-axis.
To easily change a data point at a specific x-axis point, I kept a separate array of the location of the minute block inside the series.data array for highcharts, that way if I needed to update a block, I knew exactly where that time series was.
Here is how I accomplished my task:
I create the reference array:
var pointIndex = {};
I created the inital data series from historical data for the day (pulled in via ajax):
var data = [];
var time = Math.floor(actual_time / 60000) * 60000;
pointIndex[time] = data.push({x: time, y: items_available, change: [{when: actual_time}]});
So actual_time is the number of milliseconds since epoch (when the even change occured), then I round that to the nearest minute to get the minute time block, change is the argument that will hold all the actual points for display in the tooltip.
So when I add a new point I check if the minute block exists, if it does not, add a new point, otherwise update an old point:
var time = (new Date()).getTime();
var point = Math.floor(time / 60000) * 60000;
if (pointIndex[point]) {
var change = chart.series[0].data[pointIndex[point]].change;
change.push({when: time});
chart.series[0].data[pointIndex[point]].update({x: point, y: items_available, change: change});
} else {
pointIndex[point] = chart.series[0].data.length;
chart.series[0].addPoint({x: point, y: items_available, change: [{when: time}]}, false, false);
}
(In all cases I do the actual chart refresh after I am done updating points.)
Hopefully that will help anyone else who finds theirself in the same position!
Edit:: (forgot the formatter):
tooltip: {
animation: false,
formatter: function() {
var p = '';
p += '<span style="font-size: 9px;">' + Highcharts.dateFormat('%A, %b %e, %Y %H:%M', this.x) +'</span><br/>';
$.each(this.points, function(i, point){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y +'</b>';
if (point.point.change) {
for(var j = 0; j < point.point.change.length; ++j) {
p += '<br />Change at: ' + new Date(point.point.change[j].when).toTimeString();
}
}
});
return p;
}
}