I Use datetime type in xAxis of Highchart and some of columns doesn't appear exactly in chart. For example in the below example you can see only a little part of first and last column. I don't know why.
JSFiddle Example
What's the best solution for this problem?
It's caused by wrong order of points. You have an error in the console:
Highcharts error #15: www.highcharts.com/errors/15
In Highcharts, data should be sorted ascending by x-values, for example: http://jsfiddle.net/sc5hwtfz/2/
{
name: 'C1',
data: [
[Date.parse("04/26/2017" + " UTC"), 40],
[Date.parse("04/25/2017" + " UTC"), 143],
[Date.parse("04/24/2017" + " UTC"), 40],
[Date.parse("04/23/2017" + " UTC"), 30],
[Date.parse("04/22/2017" + " UTC"), 20],
[Date.parse("04/21/2017" + " UTC"), 20],
].sort(function (a, b) { return a[0] - b[0]; })
},
Related
I have a 3D stacked column chart.
If there is some larger values in the data, the small values will not be shown in the chart.
As you can see in
http://jsfiddle.net/43pv1a2q/6/
series: [{
name: 'John',
data: [500, 3, 4, 7, 2], //If change 500 to 5, all blocks will be shown
stack: 'male'
}, {
name: 'Joe',
data: [300, 4, 4, 2, 5], //change 300 to 3
stack: 'male'
},
{
name: 'Tom',
data: [500, 3, 4, 7, 2], // change 500 to 5
stack: 'male'
}]
The minPointLength works with bar chart, but not with stacked column chart.
https://api.highcharts.com/highcharts/series.columnrange.minPointLength
How do you set a minimum height for the block in a stacked column?
It seems to be a bug. You can report it here: https://github.com/highcharts/highcharts/issues
Workaround:
I update every point using a new value if its original y value is less than 50 (threshold) and save the original value in realValue property. Then I manually compute the cumulative values for every stack in tooltip.pointFormatter so that the viewer sees proper values:
events: {
load: function() {
var chart = this,
minColHeightVal = 50;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.y < minColHeightVal) {
p.update({
y: minColHeightVal,
realValue: p.y
}, false);
}
});
});
chart.redraw();
}
}
// (...)
pointFormatter: function() {
var stackSum = 0,
point = this,
chart = point.series.chart;
chart.series.forEach(function(s) {
s.points.forEach(function(p) {
if (p.x === point.x) {
stackSum += p.realValue ? p.realValue : p.y
}
});
});
return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': ' + (point.realValue ? point.realValue : point.y) + ' / ' + stackSum;
}
Live demo: http://jsfiddle.net/kkulig/j3toufk9/
The solution might be to set the y-axis to type: logarithmic, like so: http://jsfiddle.net/43pv1a2q/8/
yAxis: {
type: 'logarithmic',
allowDecimals: false,
title: {
text: 'Number of fruits',
skew3d: true
}
},
The only change I've made is to set "type: 'logarithmic' and removed "min: 0". I can't think of any other way to achieve what you're looking for when working with such hugely different numbers.
EDIT: Of course, you can still use "min: X" to set minimum value on the y-axis; I just removed it because it was unnecessary when I wanted minimum to default.
I am new to Highchart. I have struggled in displaying more info in tooltip for a column chart.
I have the following categories:
Apple, Orange, Pear
I have the following series:
[["40%", 2], ["40%", 2], ["60%", 3]]
I am trying to show tooltips as something similar to the following. This is jsfidle demo: http://jsfiddle.net/mddc/qyc4v7fr/5/
Apple
2 selections, 40%
How can I do this?
Thanks and regards.
Figured out the answer myself. Use the following for tooltip, jsfiddle http://jsfiddle.net/mddc/qyc4v7fr/6/
tooltip: {
formatter: function () {
return this.x + '<br/>' + this.y + ' selections, <b>' + this.key + '</b>';
}
}
Hope this helps others.
I have a series of points under a single series and I want the tooltip to display all the points in the series but my tooltip displays the top and bottom points selected and does not display the remaining points through the tool tip.How to fix this ?
http://jsfiddle.net/#&togetherjs=7IfUNtFkAE
In the above fiddle,I have the tooltip displaying values for the top and bottom points for apple series ,hovered over in the fiddle.How will i make it such that middle points are also displayed when i hover over them ?
As Paweł Fus pointed out in the comment, the data is not well prepared for highcharts.
So I have converted it from basic line chart to Scatter plot with line.
Scatter plot with line
http://jsfiddle.net/S8wzF/1/ OR http://jsfiddle.net/S8wzF/2/
Reference:
http://www.highcharts.com/demo/scatter
http://www.highcharts.com/demo/combo-regression
Original fiddle with highcharts usage issues
Add useHTML for tooltip when HTML formatting is in use.
shared is not needed and thus return statement of formatter is modified accordingly.
tooltip: {
useHTML: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + 'fruit_id' + ': ' + this.point.fruit_id + '<br/>' + 'Values' + ': ' + this.point.y + '<br/>' + 'Mean' + ': ' + this.point.mean + '<br/>' + 'Median' + ': ' + this.point.median + '<br/>' + 'Min' + ': ' + this.point.min + '<br/>' + 'Max' + ': ' + this.point.max + '<br/>'
}
}
Original code contains Javascript problems (Unrelated to highcharts)
The series add data incorrectly as it is inside the loop.
Put this segment of code outside "for loop".
series.push({
data: data,
type: 'line',
color: '#000',
marker: {
symbol: 'circle'
},
showInLegend: false
});
Can someone post an example of a custom aggregate method in highchart?I want to create a custom aggregate method that groups the following points into a single point with the tool tip ?
I have an array that has the following data
array1 :['apple',2,4,10,12.5]
I want the above array to be represented in a single grouped point with a tool tip
that shows as follows
apple
no of apples : 2
min:4
max:10
mean:12.5
I would process the data to get it into a format highcharts recognizes and then add the extra data to the point object. You can reference that extra data in the tooltips formatter function:
$(function () {
var input = [['apple',2,4,10,12.5],
['pear',1,5,10,12],
['orange',3,4,10,13.5],
['grape',4,4,10,11.5]],
data = [],
categories = [];
for (i=0;i<input.length;i++) {
categories.push(input[i][0]);
data.push({x: i,
y: input[i][1],
myMin: input[i][2],
myMax: input[i][3],
myMean: input[i][4]});
}
$('#container').highcharts({
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>' +
'No. of ' + this.x + ': ' + this.y + '<br/>' +
'min : ' + this.point.myMin + '<br/>' +
'max : ' + this.point.myMax + '<br/>' +
'mean : ' + this.point.myMean;
}
},
xAxis: {
categories: categories
},
chart: {
marginRight: 50
},
series: [{
data: data
}]
});
});
http://jsfiddle.net/bhlaird/Du5Nw/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Set Additional Data to highcharts series
So I have this graph: http://jsfiddle.net/Gg3ZL/
And I want to replace in the tooltip where it currently says "Total Players Online" with new data from another
Array= ['PlayerX, PlayerY, PlayerZ', 'Player1, Player2, Player3'];
etc
So that it matches with the very first result in the first series data entry....
Even better if I didn't have to replace the "Total Players Online: " and instead just had another new entry in the tooltip like "Who's Online: ".
Basically mouse over an entry and see which players were online at that particular time on the tooltip.
Thanks for any help
You can attach the additional data with each point in the series.data as follows
series: [{
name: 'Series 1',
data: [{
y: 2,
players: ['a', 'b']},
{
y: 3,
players: ['a', 'b', 'c']},
{
y: 2,
players: ['x', 'y']},
{
y: 4,
players: ['a', 'b', 'c', 'd']}
]
}]
Now in the tooltip.formatter you can consume the additional data as follows
formatter: function() {
var result = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function(i, datum) {
result += '<br />' + datum.y + ' players online';
$.each(datum.point.players, function() {
result += '<br/>' + this;
});
});
return result;
}
Complex tooltip | Highchart & Highstock # jsFiddle