How would I draw a spline on columns in each category in Highcharts?
Let's say, I have 5 categories on the x-axis, and each category has 4 columns. Now I want a spline that passes through all the 4 columns in the category (each category should have a separate spline on its corresponding columns)
Is it possible if categories and columns change dynamically?
For column series you can disable grouping and set pointPlacement to a number value. Than, you can set x data values for spline series to fit them to the columns:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category',
startOnTick: true,
min: 0
},
plotOptions: {
series: {
grouping: false,
pointWidth: 20
}
},
series: [{
data: [1, 1, 1, 1, 1],
pointPlacement: -0.3
}, {
data: [2, 2, 2, 2, 2],
pointPlacement: -0.1
}, {
data: [3, 3, 3, 3, 3],
pointPlacement: 0.1
}, {
data: [4, 4, 4, 4, 4],
pointPlacement: 0.3
}, {
type: 'spline',
pointRange: 11,
data: [
[-0.3, 1],
[-0.1, 2],
[0.1, 3],
[0.3, 4]
]
}, {
type: 'spline',
pointRange: 11,
data: [
[0.7, 1],
[0.9, 2],
[1.1, 3],
[1.3, 4]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/bdsfty2o/
API Reference:
https://api.highcharts.com/highcharts/series.column.grouping
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.pointPlacement
Related
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
I would like to have a chart that represent data like this.
the series code would be something like this.
series: [{
name: 'Car 1',
data: [[1, 3], [4, 6], [7, 9]]
}, {
name: 'Car 2',
data: [[2, 3], [8, 10], [12, 18]]
}]
The first number on each array would be the starting point and the second the finishing point, and all arrays inside the main array would be on the same line.
An inverted columnrange chart should work. Your data isn't formatted in a way that would work with what you want, but transforming it isn't difficult. If you aren't stuck with the data format you showed, you just need a point object with x, low, and high.
For example:
{
x: 1,
low: 0,
high: 4
}
The following massages your current structure into the correct format:
$(function () {
var series = [{
name: 'Car 1',
data: [
[1, 3],
[4, 6],
[7, 9]
]
}, {
name: 'Car 2',
data: [
[2, 3],
[8, 10],
[12, 18]
]
}, {
name: 'Car 3',
data: [
[5, 9],
[1, 2]
]
}];
// massage the data
var data = [];
for(var i=0;i<series.length;i++) {
for(var j=0;j<series[i].data.length;j++) {
data.push({
x: j,
low: series[i].data[j][0],
high: series[i].data[j][1],
name: series[i].name
});
}
}
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Cars',
data: data
}]
});
});
http://jsfiddle.net/hqwrx4uy/
I use different colors for the bars in a Highcharts bar chart to denote two different groups of data like so (abbreviated):
$(function () {
$('#moduleDistribution').highcharts({
colors: ['red', 'red', '#1aadce', '#1aadce'],
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: [
['node', 291],
['wifi', 289],
['timer', 289],
['net', 285]
]
}]
});
});
Demo: http://jsfiddle.net/7Luob5k8/4/
How can I create a legend (or similar) to explain the meaning of the colors? I'd like to explain to the viewer why some bars are red and some are not.
You can achieve this by using 2 series. Make them visible in the legend. Assign the color you want to it. mention Category names in xAxis and use a [x,y] co-ordinates system to send the data to the chart.
your categories
xAxis: {
categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap']
},
your series will look like this.
series: [{
data: [
[0, 291],
[1, 289],
[2, 289],
[3, 285],
[4, 284],
[5, 283],
[6, 263]
],
color: '#FF0000'
}, {
data: [
[7, 135],
[8, 119],
[9, 100],
[10, 96],
[11, 89],
[12, 80],
[13, 65],
[14, 60],
[15, 57],
[16, 46],
[17, 20]
],
color: '#1aadce'
}]
Here I've updated your fiddle
I want to change the distance between the grid lines (Y-axis) ..
They told me that I should use "tickPositioner" ...
But I have not figured out how ...
I have this code:
yAxis: {
reversed: true,
categories: ['0','10','20','30','50','80','130','210','340','550','700'],
labels: {
format: '{value} km',
enabled: true
},
title: {
text: "profondita'"
}
},
xAxis: {
min: 0,
max: 10,
labels: {
enabled: true
},
gridLineWidth: 1,
title: {
text: '<small><b>'+"Longitudine"+'</b></small>',
}
},
zAxis: {
min: 0,
max: 10,
labels: {
format: '{value} Lat',
enabled: true
},
title: {
text: "Latitude"
}
},
series: [{
colorbypoint:
{ color: "#FF0000"},
data: [
// [X, Y, Z]
[1, 1, 1],
[1, 9, 2],
[1, 1, 5],
[2, 3, 2],
[2, 6, 4],
[4, 5, 7],
[4, 2, 8],
[7, 1, 3],
[7, 1, 5],
[8, 1, 5]
],
}]
And I would have 50px between the first category and the second category (value between 0 and the value 10), have 70 px between the second category and the third category (between the value and the value 10 20) ..
If you can not show me a small example, you can tell me how I should proceed? I searched on StackOverflow but have not found anything useful
You can use empty categories, but you will be able to set only multiples of single label distance.
Example: http://jsfiddle.net/j86jkfvj/69/
categories: ['0', '10', '20', '30', '40','50','60','70', '80','90','100','110','120', '130', '210', '340', '550', '700'],
tickPositions: [0,1,2,3,5,8,13],
Alternatively you could use other type of axis then categorized ('linear' - default one) as suggested in comments and adjust your data.
My series data and column chart look like this.
series data array values are the count which i need to display on the top of bars and series percentwithingroupvalues array data as in the fiddle should be my Y-axis data.
How to acheive this? Below is my data
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
/*Percentage is calculated as
Below values are random
(5)*100/(5+2+3)
*/
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
percentwithingroupvalues:[20,20,20,20,20]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
percentwithingroupvalues:[20,20,20,20,20]
}]
You need to set for each point object { }, instead of value y , see: http://jsfiddle.net/tRKad/3/
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.custom;
}
}
}
},
series: [{
name: 'John',
data: [{
custom: 5,
y: 20
}, {
custom: 3,
y: 15
}, {
custom: 4,
y: 11
}, {
custom: 22,
y: 7
}, {
custom: 33,
y: 2
}],
}]