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.
Related
I have a column chart created using highcharts , where in I am showing list of student names in a class on x axis and average marks obtained on all the quiz he has taken on the y axis. For example student "abc" had scored 50 and 100 on two tests hence his average is 75. I want 75 to be displayed as value on column chart and on the tool tip i want to display "test 1 - 50","test 2 - 100".So inside series object i am passing in an array of average. Same will be done for other students in class.Help appreciated
You can put the test values as custom properties and refer to them in tooltip's formatter function:
series: [{
type: 'column',
data: [{
y: 75,
tests: [50, 100]
}, {
y: 50,
tests: [50, 50]
}]
}],
tooltip: {
formatter: function() {
var str = '';
this.point.tests.forEach(function(test, i) {
str += '<br>test' + (i + 1) + ' ' + test;
});
return str;
}
}
Live demo: http://jsfiddle.net/BlackLabel/t5f43zwn/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I develop a project using Highstock.js library. I have a requirement to not draw lines beyond MACD indicator histogram (https://prnt.sc/lxjoit). In Highstock.js documentation related to MACD indicator there is macdLine API: https://api.highcharts.com/highstock/series.macd.macdLine , signalLine API: https://api.highcharts.com/highstock/series.macd.signalLine.zones. Those API allows only to set colors for MACD indicator parts divided by y axis. So it doesn't fit. From documentation it isn't clear if we can to not draw MACD indicator lines beyond the histogram. Do you know if it is possible to implement that and how? Please advise.
Here is live demo in JSFiddle showing chart with MACD indicator: http://jsfiddle.net/ogorobets/x3tcpq72/14/
var ohlc = JSON.parse(ohlcStringified),
volume = JSON.parse(volumeStringified);
var wvapSerieData = [];
var lastDayDate = new Date("December 6, 2018 00:00:00");
var lastDayDateTs = lastDayDate.getTime();
Highcharts.stockChart('container', {
chart: {
borderWidth: 1
},
title: {
text: 'Volume Weighted Average Price (VWAP)'
},
legend: {
enabled: true
},
yAxis: [{
height: '30%'
}, {
top: '30%',
height: '35%',
offset: 0
}, {
top: '65%',
height: '35%',
offset: 0
}],
series: [{
type: 'candlestick',
id: 'candlestick',
name: 'AAPL',
data: ohlc,
tooltip: {
valueDecimals: 2
}
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1
},
{
type: 'macd',
color: '#f05f5f',
linkedTo: 'candlestick',
showInLegend: true,
enableMouseTracking: true,
dataGrouping: {
enabled: false,
},
zones:[
{
value: 0,
color: '#f05f5f',
},
{
color: '#31c26d'
}
],
yAxis: 2
}]
});
Unfortunately, MACD indicator was not designed to not plot MACD indicator lines beyond the histogram.
However, you can override the method that calculates MACD values and remove first values that are beyond the histogram. Check the code and demo I posted you below.
Lines added to H.seriesTypes.macd.prototype.getValues method:
// params.signalPeriod - 1 - amount of points beyond the histroram
MACD.splice(0, params.signalPeriod - 1);
xMACD.splice(0, params.signalPeriod - 1);
yMACD.splice(0, params.signalPeriod - 1);
Whole wrapper code:
(function(H) {
H.seriesTypes.macd.prototype.getValues = function(series, params) {
var j = 0,
EMA = H.seriesTypes.ema,
merge = H.merge,
defined = H.defined,
correctFloat = H.correctFloat,
MACD = [],
xMACD = [],
yMACD = [],
signalLine = [],
shortEMA,
longEMA,
i;
if (series.xData.length < params.longPeriod + params.signalPeriod) {
return false;
}
// Calculating the short and long EMA used when calculating the MACD
shortEMA = EMA.prototype.getValues(series, {
period: params.shortPeriod
});
longEMA = EMA.prototype.getValues(series, {
period: params.longPeriod
});
shortEMA = shortEMA.values;
longEMA = longEMA.values;
// Subtract each Y value from the EMA's and create the new dataset
// (MACD)
for (i = 1; i <= shortEMA.length; i++) {
if (
defined(longEMA[i - 1]) &&
defined(longEMA[i - 1][1]) &&
defined(shortEMA[i + params.shortPeriod + 1]) &&
defined(shortEMA[i + params.shortPeriod + 1][0])
) {
MACD.push([
shortEMA[i + params.shortPeriod + 1][0],
0,
null,
shortEMA[i + params.shortPeriod + 1][1] -
longEMA[i - 1][1]
]);
}
}
// Set the Y and X data of the MACD. This is used in calculating the
// signal line.
for (i = 0; i < MACD.length; i++) {
xMACD.push(MACD[i][0]);
yMACD.push([0, null, MACD[i][3]]);
}
// Setting the signalline (Signal Line: X-day EMA of MACD line).
signalLine = EMA.prototype.getValues({
xData: xMACD,
yData: yMACD
}, {
period: params.signalPeriod,
index: 2
});
signalLine = signalLine.values;
// Setting the MACD Histogram. In comparison to the loop with pure
// MACD this loop uses MACD x value not xData.
for (i = 0; i < MACD.length; i++) {
if (MACD[i][0] >= signalLine[0][0]) { // detect the first point
MACD[i][2] = signalLine[j][1];
yMACD[i] = [0, signalLine[j][1], MACD[i][3]];
if (MACD[i][3] === null) {
MACD[i][1] = 0;
yMACD[i][0] = 0;
} else {
MACD[i][1] = correctFloat(MACD[i][3] -
signalLine[j][1]);
yMACD[i][0] = correctFloat(MACD[i][3] -
signalLine[j][1]);
}
j++;
}
}
MACD.splice(0, params.signalPeriod - 1);
xMACD.splice(0, params.signalPeriod - 1);
yMACD.splice(0, params.signalPeriod - 1);
return {
values: MACD,
xData: xMACD,
yData: yMACD
};
}
})(Highcharts);
Demo:
http://jsfiddle.net/1f2m0yz4/
Docs:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am attempting to create a donut chart with (long) labels. The container for the chart is small (and dynamic). I keep running into a problem where the labels for the outer chart are cutoff.
series: [{
name: 'Browsers',
data: browserData,
size: '65%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '85%',
innerSize: '65%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
jsfiddle: http://jsfiddle.net/sw99B/
What I am trying to accomplish is the auto pie size, as is the case with simple pies:
series: [{
name: 'Versions',
data: versionsData,
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
jsfiddle: http://jsfiddle.net/4P4D5/
The problem with donuts is that I have to specify the size of the inner & outer donut. This causes the two pies making the donut to have fixed radius. Ideally, I would have the inner pie be a percentage of the outer; and let the outer pie have an auto-size.
Any suggestions on how to accomplish this?
The dataLabels: formatter... is only controlling whether or not to show datalabel for thinner slices. It's not controlling the size of the pie chart. That is being specified by the series:[{size parameter. In your example it's set to 85% of the container which does lead to overflow.
According to the docs
The default behaviour (as of 3.0) is to scale to the plot area and
give room for data labels within the plot area.
If you comment out the size on your example, it does indeed squeeze in the labels but I'm not sure you'll love the look of it.
The following minor patch to highcharts.src.js v4.0.1 achieves the desired behaviour:
--- highcharts.src.orig.js 2014-04-24 08:25:52.000000000 +0000
+++ highcharts.src.js 2014-06-24 13:57:42.957605307 +0000
## -12167,6 +12167,22 ##
positions = [pick(centerOption[0], '50%'), pick(centerOption[1], '50%'), options.size || '100%', options.innerSize || 0],
smallestSize = mathMin(plotWidth, plotHeight),
isPercent;
+
+ /**
+ * Allow a chart (pie) to specify a size relative to another series. In
+ * that case, simply copy the center position of the parent, and scale
+ * the radius.
+ */
+ if ( options.relativeSize ) {
+ parentPositions = chart.series[options.relativeSize.parentSeries].center;
+ positions[0] = parentPositions[0];
+ positions[1] = parentPositions[1];
+ positions[2] = options.relativeSize.size * parentPositions[2];
+
+ return map(positions, function (length, i) {
+ return positions[i]
+ });
+ }
return map(positions, function (length, i) {
isPercent = /%$/.test(length);
Then, when configuring the donut:
series: [{
name: 'Browsers',
data: browserData,
center: ['50%', '50%'],
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
relativeSize: {
parentSeries: 0, // index of parent series
size: 0.75 // 75% of parent pie
}
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%' : null;
}
}
}]
Note that the parent (outer) pie must be explicitly centered in the container, otherwise in certain cases the two pies may not be concentric.
Also, requiring the index of the series to be specified is clearly not ideal, but in a tightly controlled graph (as is a donut), it seems to do the job.
Unfortunately this option is not available, so I advice you to post your request on the uservoice
I'd like to have the y-axis data labels return 'N/A' for null values. Currently nothing is displayed. I tried using the y-formatter function to say if the y value equaled null, return N/A but haven't had luck for some reason? I'm somewhat new to Highcharts, so please forgive the basic nature of the question.
formatter: function() {
if (this.y !== null)
return 'test';
var chart = this.series.chart;
chart.renderer.text('n/a', this.point.plotX - 10, chart.plotHeight - 10).add(this.series.group)
},
Here's the link to the JSFiddle: http://jsfiddle.net/v5vJR/
Remove format from your dataLabels options. Then you need to properly calculate where put that label. plotY will be undefined, since there is no value, right?
formatter: function () {
var str;
if (this.y !== null) {
return this.y + '%';
} else {
var chart = this.series.chart,
categoryWidth = chart.plotHeight / chart.xAxis[0].categories.length,
offset = (this.point.x + 1) * categoryWidth - this.point.pointWidth + 3; //
chart.renderer.text('n/a', chart.plotLeft, chart.plotTop + offset).add();
}
return false;
},
Demo: http://jsfiddle.net/v5vJR/3/
Solution
Documentation: http://api.highcharts.com/highcharts#Renderer
Fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-text/
chart.renderer.text('<span style="color: #a2a5a1">N/A</span>', chart.plotLeft, chart.plotTop + offset)
.css({
color: '#a2a5a1',
fontSize: '11px'
})
.add();
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