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/
Related
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
Have an issue, probably I have mixed more things, then should be, but anyway it will be nice to figure this out.
Have an fiddle link with with code sample below
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: ''
},
plotOptions: {
column: {
stacking: 'normal',
events: {
legendItemClick: function () {
var index = this.index;
var legendName = this.name;
var series = this.chart.series;
series.forEach(function(el, index){
if(legendName == el.name) {
if(el.visible)
el.setVisible(false);
else
el.setVisible(true);
}
});
return false;
}
},
},
},
yAxis: [{
labels: {
format: '{value} $',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'First Y Axis',
style: {
color: Highcharts.getOptions().colors[2]
}
},
}, {
gridLineWidth: 0,
title: {
text: 'Second Y Axis',
style: {
color: Highcharts.getOptions().colors[0],
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
}],
xAxis: {
labels: {
rotation: -90,
groupedOptions: [{
rotation: 0,
style: {
rotation: 0,
}
}],
},
categories: [
{
name:'Apples',
categories: ['male', 'female']
},
{
name:'Oranges',
categories: ['male', 'female']
},
{
name:'Pears',
categories: ['male', 'female']
},
{
name:'Grapes',
categories: ['male', 'female']
},
{
name:'AppBananasles',
categories: ['male', 'female']
}]
},
series: [
{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
},
]
})
});
https://jsfiddle.net/9o64ybo4/
Using here highcharts and one of the highcharts plugins - grouped-categories plugin.
I have here some categories and subcategories and planned that 1-st subcategory (male) should appear below the first columns, and second one (female) should appear below the second column and so on.
As You can see there I have lost 2 top level categories like (Grapes and AppBananasles).
Any suggestions will be appreciated !
You need to assign a category to the point explicitly.
series: [
{
name: 'John',
data: [[0, 5], [2, 3], [4, 4], [6, 7], [8, 2]],
stack: 'male',
// pointPlacement: 0.15
}, {
name: 'Joe',
data: [[0, 3], [2, 4], [4, 4], [6, 2], [8, 5]],
stack: 'male',
// pointPlacement: 0.15
}, {
name: 'Jane',
data: [[1, 2], [3, 5], [5, 6], [7, 2], [9, 1]],
stack: 'female',
// pointPlacement: -0.15
}, {
name: 'Janet',
data: [[1, 3], [3, 0], [5, 4], [7, 4], [9, 3]],
stack: 'female',
// pointPlacement: -0.15
},
]
example: https://jsfiddle.net/9o64ybo4/1/
Point placement allows to move a column to the right/left, it may be needed because you have two stacks and each category create an empty space for the second stack.
The other approach, without different stacks, could be reorganise the data a little by adding null values.
series: [
{
name: 'John',
data: [5, null, 3, null, 4, null, 7, null, 2, null],
// stack: 'male'
}, {
name: 'Joe',
data: [3, null, 4, null, 4, null, 2, null, 5, null],
// stack: 'male'
}, {
name: 'Jane',
data: [null, 2, null, 5, null, 6, null, 2, null, 1],
// stack: 'female'
}, {
name: 'Janet',
data: [null, 3, null, 0, null, 4, null, 4, null, 3],
// stack: 'female'
},
]
example: https://jsfiddle.net/9o64ybo4/2/
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/
Is it possible to use "step" in the navigator serie? As documented in the API it should be possible, but for some reason is not working for me.
I'm making a "Gantt" chart with Highstock, and I don't like the default navigator behavior for charts with multiple panes (by default the navigator "borrow" the first serie data). That's why I'm supplying the navigator series data
Fiddle
$(function () {
var data1 = [[1, 0, 1], [2, 0, 1], [2, null, null], [3, 0, 1], [5, 0, 1], [5, null, null], [6, 0, 1], [10, 0, 1]]
var data2 = [[1, null, null], [2, 0, 1], [4, 0, 1], [10, null, null]]
var dataNavigator = [[1, 1], [3, 2], [4, 1], [5, 0], [6, 1], [10, 1]]
$('#container').highcharts('StockChart', {
chart: {
type: 'arearange'
},
xAxis : {
ordinal: false
},
navigator : {
series : {
step: true,
data: dataNavigator
}
},
yAxis: [{
gridLineWidth: 0,
opposite: false,
height: '50%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
gridLineWidth: 0,
opposite: false,
top: '50%',
height: '50%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}],
rangeSelector: {
selected: 2
},
title: {
text: 'Temperature variation by day'
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>'
},
series: [{
name: 'Serie Name 1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Serie Name 2',
data: data2,
step: true,
yAxis: 1,
id: 'series1'
}]
});
});
As step is defined for series of type line you have to manually define it. Also, the values for step are 'left', 'right' and 'center'. For example:
navigator : {
series : {
type: 'line',
step: 'left',
data: dataNavigator
}
}
See this JSFiddle demonstration of how it looks.
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.