I'm trying to use highcharts to draw column chart with the following data:
- I have three categories: apples, oranges, peaches
- I have three data series for it: [1, 10, 100], [2, 9, 120], [1, 11, 150]
As you can see y values for different categories have completely different scales and I would like to show them accordingly. I'd like to show three groups of three columns, like this:
1, 2, 1 --- 10, 9, 11 --- 100, 120, 150
But also make sure first group is not completely squeezed into the ground because of the lower values.
Is it possible with highcharts?
You may want to take a look at the dual-axis chart example. Basically, you just need to make sure that you define your data in separate series, with different y-axes.
var chart = new Highcharts.Chart({
//...
yAxis: [
//your yAxis definitions
],
series: [{
name: "Apples",
yAxis: 0, //the index of the yAxis definition you want to use
data: [1,2,1]
}, {
name: "Oranges",
data: [10,9,11]
}, {
name: "Peaches",
data: [100,120,150]
}]
})
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
I'm trying to graphic some values, I have this part, then I want to add some max and min line, I could do this creating another series and adding the min/max value that I want, the problem here is that my value series is an array of n elements so I want to know if I could create the min/max series for example just doing data: [2] and put the line in all the width of my chart. Something like this:
If there is no way to do this, just if is possible doing: data[2, 2, 2,.... n] is possible to show only the first and the last point and hide the rest of them?
Here is my working code
You can use plotLines for this.
Example:
yAxis: {
softMax: max,
min: 0,
plotLines: [{
value: min,
width: 1,
color: 'rgba(204,0,0,0.75)'
},{
value: max,
width: 1,
color: 'rgba(204,0,0,0.75)'
}]
}
Updated pen:
http://codepen.io/jlbriggs/pen/LbJQEV
Alternatively, if you really want it to be a series, you can grab the min and max x values, and provide your data as arrays of [x,y] pairs. Something like:
series: [{
name: 'Actual Series'
...
},{
name: 'Max',
data: [[xMin,yMax],[xMax,yMax]]
},{
name: 'Min',
data: [[xMin,yMin],[xMax,yMin]]
}]
Can I set a y axis labels as ["1-10","10-20","20-30","30-40","40-50","50-60"] and bar data depends on these range.
Can you please provide us a JSfiddle demo here?
Yes, you can. Simply use categories on yAxis, and normalize values before rendering chart. For example: http://jsfiddle.net/2x0w7jyu/
var normalizedData = [0, 0, 1, 5, 4, 3, 2, 2, 5]
$('#container').highcharts({
yAxis: {
categories: ["1-10", "10-20", "20-30", "30-40", "40-50", "50-60"]
},
series: [{
name: 'Tokyo',
data: normalizedData
}]
});
When data labels overlap in Highcharts, only one data label is displayed. This seems to be handled randomly. See fiddle:
http://jsfiddle.net/lamarant/rmxLd1d4/
$(function () {
$('#container').highcharts({
title: {
text: 'Label Test'
},
series: [{
type: 'line',
data: [ 10, 10, 10, 10, 10, 10, 50],
dataLabels: {
enabled: true,
color: 'blue',
zIndex: 10
},
zIndex: 10
},
{
type: 'line',
data: [ 11, 11, 11, 11, 11, 11, 49],
dataLabels: {
enabled: true,
color: 'red',
zIndex: 10
},
zIndex: 20
}]
});
});
Notice that the first data label displayed in the chart is from the second series while the rest are from the first series.
I tried setting the priority of the label display using zIndex in both series and series.dataLabel with no luck.
Is there any way to set it so that a designated series always takes priority when Highcharts determines which label to display?
One possible fix is supplying a labelrank for each point, which is used to evaluate their sorting order. If you supply this rank for each point in a series, that series should be considered "above" series without such a rank (or with a lower rank integer value).
In code, manually for each point:
series: [{
data: [
{ y: 11, labelrank: 1 },
{ y:11, labelrank: 1 }
// ...
],
// ...
}]
In code, using the callback function (JSFiddle):
$('#container').highcharts({
// Options ...
}, function() {
var mySeriesIndex = 1;
// For each point in the preferred series
for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
// Set a labelrank
this.series[mySeriesIndex].points[i].labelrank = 1;
});
My current take on the issue itself is this:
With the current implementation of the overlap logic it seems to me that this is a bit of an unintended behavior. The source code uses Array.sort in a way that shifts the positions of the point labels, since Array.sort is not guaranteed to be stable (same-value items wont retain their original order).
If you check your example in Firefox it should work as intended (their implementation of Array.sort is different), while in Chrome it doesn't (not stable). You could hope that this little feature is fixed.
I'm working with this chart, and the thing I'm trying to create is that for example "Apples" bar does not start from 0 on y axis. Instead of that, I want it to start from from example 25%, and to end in 75% (so that bar in chart (its height) is from 25 to 75, when you look at values in y-axis). Does anyone have an idea of how to do that? What to change?
You can use the column range chart type. See this official demonstration.
Here is a sample of your apples (JSFiddle):
$('#container').highcharts({
chart: {
type: 'columnrange'
},
xAxis: {
categories: ['Apples']
},
yAxis: [{
min: 0,
max: 100
}],
series: [{
data: [
[25, 75],
]
}]
});