Can we fill colors like this in boxplot chart of Highcharts?
Please refer the image below:
You can calculate point color based on some algorithm, for example:
chart: {
type: 'boxplot',
events: {
load: function(){
var points = this.series[0].points,
color,
length = points.length;
Highcharts.each(points, function(point, i){
color = 'rgb(255,' + Math.floor(i * 255 / length) + ', 0)'
point.update({ fillColor: color }, false)
});
this.redraw();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/5k8wfrgc/
Yes, its possible to control the fillColor for a boxplot.
This is a demonstration to show you:
http://jsfiddle.net/mqunbjrs/
If you take a look at the highcharts API you will see that instead of using an array with the 6 plot values, you can use an object with named values: https://api.highcharts.com/highcharts/series.boxplot.data
instead of this:
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
You would use this:
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
fillColor: "#00FF00"
}, {
x: 2,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
fillColor: "#FF00FF"
}]
Related
I'm struggling with creating a stacked bar chart which basically compares week to week performance. I have the overall numbers charted fine:
I'm now being tasked with showing how individual proposals contribute to the overall number. Each week can have any number of proposals or none at all.
The desired outcome would look something like:
I'm building the series by week. So for "This Week" I would know {10, 30, 15, 4, 20, 10} "Last Week" I would know {20, 25}, "Two weeks ago" I would know {17, 3, 2, 2} etc.
Thanks for any help!
You need to use stacking option and divide data into series, for example:
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [2, 4, 0, 1, 4, 8]
}, {
data: [2, 4, 5, 0, 4, 8]
}, {
data: [2, 4, 0, 1, 4, 8]
}, {
data: [2, 4, 5, 1, 4, 8]
}],
xAxis: {
categories: [...]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4894/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.stacking
Is it possible to have both colorAxis and series in the legend? http://jsfiddle.net/6k17dojn/ i see i can only show one at a time when I toggle this setting
colorAxis: {
showInLegend: true,
}
Currently to show a basic legend with colorAxis, you need to add some code to Highcharts core. This plugin below allows you to add colorAxis to a legend if showInLegend property is set to false:
(function(H) {
H.addEvent(H.Legend, 'afterGetAllItems', function(e) {
var colorAxisItems = [],
colorAxis = this.chart.colorAxis[0],
i;
if (colorAxis && colorAxis.options) {
if (colorAxis.options.dataClasses) {
colorAxisItems = colorAxis.getDataClassLegendSymbols();
} else {
colorAxisItems.push(colorAxis);
}
}
i = colorAxisItems.length;
while (i--) {
e.allItems.unshift(colorAxisItems[i]);
}
});
}(Highcharts))
Live demo: http://jsfiddle.net/BlackLabel/hs1zeruy/
API Reference: https://api.highcharts.com/highcharts/colorAxis.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts
It's possible, but not with the data you currently work with. A heatmap's data is a set of coordinates, but here, your two series overlap.
Your raw data is :
[
[0,0,0.2, 0.4],
[0,1,0.1, 0.5],
[0,2,0.4, 0.9],
[0,3,0.7, 0.1],
[0,4,0.3, 0.6]
]
From there, you're mapping two series: 2018, and 2019 via the seriesMapping: [{x: 0, y: 1, value: 2}, {x: 0, y: 1, value: 3}] option.
You thus end up with the following two series:
2018 2019 2019 should be
[ [ [
[0, 0, 0.2], [0, 0, 0.4], [1, 0, 0.4],
[0, 1, 0.1], [0, 1, 0.5], [1, 1, 0.5],
[0, 2, 0.4], [0, 2, 0.9], [1, 2, 0.9],
[0, 3, 0.7], [0, 3, 0.1], [1, 3, 0.1],
[0, 4, 0.3] [0, 4, 0.6] [1, 4, 0.6]
] ] ]
Notice that in both cases, the coordinates are the same, but for 2019, the x value should be 1. Since you have 0 as x coordinate for both series, they overlap.
To fix you issue, you need to change your data (or pre-process it, whatever is easier). For example:
var data = '[[0,0,0.2, 0.4],[0,1,0.1, 0.5],[0,2,0.4, 0.9],[0,3,0.7, 0.1],[0,4,0.3, 0.6]]';
var rows = JSON.parse(data);
rows = $.map(rows, function(arr){
return [[
arr[0], arr[1], arr[2], // 2018
arr[0] + 1, arr[1], arr[3], // 2019
]];
});
// and the seriesMapping changes to
data: {
rows: rows,
firstRowAsNames: false,
seriesMapping: [{x: 0, y: 1, value: 2}, {x: 3, y: 4, value: 5}]
},
You can see it in action here: http://jsfiddle.net/Metoule/qgd2ca6p/6/
I have this chart
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];
/**
* Create the chart when all data is loaded
* #returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
plotOptions: {
series: {
gapSize: 5 * 24 * 3600 * 1000,
gapUnit: 'relative'
}
},
rangeSelector: {
selected: 5
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function (i, name) {
$.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json', function (data) {
if (i==0) {
var first = [], last = [];
first.push.apply(first, data.slice(0,1)[0]);
last.push.apply(first, data.slice(0,1)[0]);
first[0] = first[0] - 1900 * 24 * 3600 * 1000;
last[0] = last[0] - 130 * 24 * 3600 * 1000;
data = [];
data.push(first);
data.push(last);
}
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
and as you can see there are three stocks shown. If you hover the chart with the mouse and go to the beginning you'll notice MSFT stock which has only 2 points and that's intentional. After MSFT there should be about 6 year gap, however on the chart it's shown in a few pixels.
How can I configure stockChart to show real gaps? In other words, I want to see the gap of 6 years so from 2005 till 2011 there will be empty space proportional to the whole chart?
The discussion in the comment section of the first answer reveals that OP wants to hide no-data periods only in some cases.
The solution here might be to set ordinal to false (as #ewolden) suggested and use breaks instead:
xAxis: {
breaks: [{
breakSize: 24 * 3600 * 1000,
from: Date.UTC(2017, 0, 6),
to: Date.UTC(2017, 0, 9)
}],
ordinal: false
},
series: [{
data: [
[Date.UTC(2017, 0, 2), 6],
[Date.UTC(2017, 0, 3), 7],
[Date.UTC(2017, 0, 4), 3],
[Date.UTC(2017, 0, 5), 4],
[Date.UTC(2017, 0, 6), 1],
[Date.UTC(2017, 0, 9), 8],
[Date.UTC(2017, 0, 10), 9],
[Date.UTC(2017, 6, 1), 4],
[Date.UTC(2017, 6, 2), 5]
]
Example: http://jsfiddle.net/BlackLabel/ocg0dujg/
In the above demo I was able to hide the weekend (7 and 8 Jan) and maintain the space between January and July.
API reference: https://api.highcharts.com/highstock/xAxis.breaks
What you are after is ordinal.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.
Setting ordinal to false, like this, will give you the gap you are after:
xAxis: {
type: 'datetime',
ordinal: false,
},
There are some other issues with your code, if you look in console, you are getting error 15 which states that highcharts requires data to be sorted. You get this because of how you add the series data to your MSFT series. You add both the x and the y to a single 1D array, which means highcharts tries to plot both your x and y values on the x axis.
I did a workaround that gives it the right format in this fiddle: http://jsfiddle.net/2cps91ka/91/
I am a bit confused by the documentation regarding the notation for point values when it comes to 3+ value charts such as HeatMap and BoxPlot.
I see that point values can be supplied as n length arrays:
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080]...
]
And that they can be config objects with additional/custom properties:
data: [{
name: 'Point 1',
color: '#00FF00',
x: 1,
y: 3
}, {
name: 'Point 2',
color: '#FF00FF',
x: 2,
y: 5
}]
But how does one use the config object notation for HeatMap/BoxPlot when the only documented value properties seem to be 'x' and 'y'?
Is there a supported property of the config object that will be interpreted as the n length array? Something like this?
data: [{
name: 'Point 1',
color: '#00FF00',
values: [1,2,3]
}, {
name: 'Point 2',
color: '#FF00FF',
values: [4,5,6]
}]
It depends on the type of chart.
For HeatMap (reference):
A heat map has an X and Y axis like any cartesian series. The point definitions however, take three values, x, y as well as value, which serves as the value for color coding the point. These values can also be given as an array of three numbers.
In other words you could do { x: 0, y: 1, value: 10 } or [0,1,10].
For BoxPlot (reference):
Each point in a box plot has five values: low, q1, median, q3 and high. Highcharts recognizes three ways of defining a point:
Object literal. The X value is optional.
{ x: Date.UTC(2013, 1, 7), low: 0, q1: 1, median: 2, q3: 3, high: 4 }
Array of 5 values. The X value is inferred.
[0, 1, 2, 3, 4]
Array of 6 values. The X value is the first position.
[Date.UTC(2013, 1, 7), 0, 1, 2, 3, 4]
In the below demo link, if user clicks on series or legend [Jane or John] the values or graph dynamic sets the y axis values based on the series input.
Is there a way to set a static or equal set of values on either side of threshold? [7.5,5,2.5,0-2.5,-5,-7.5]??? which remains constant?
Example from highcharts demo section
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
You need to set min/max values on the Y-axis, like bellow
yAxis: {
min: -7.5,
max: 7.5
}
Or you can do let highcharts set the extremes, but set manually after
var chart = $('#container').highcharts({
...
}).highcharts();
var extremes = chart.yAxis[0].getExtremes();
chart.yAxis[0].setExtremes(extremes.min, extremes.max);