Is there a way to have grouped columns displayed in a time series. So for every timeframe there will be 2 columns with stacked data.
The problem is that this would be 3 dimensional data and I have no idea if Highcharts can handle this. Also how would the xAxis handle the display of date and column name?
The only thing that I came up with is this: http://jsfiddle.net/7p34o3w5/1/
{
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
plotOptions: {
column: {
stacking: 'normal',
pointInterval: 86400000,
pointStart: 1411336800000
}
},
series: [{
"name": "Politik",
stack: 0,
"data": [100, 100]
}, {
"name": "Panorama",
stack: 0,
"data": [100, 100]
}, {
"name": "Kultur",
stack: 0,
"data": [100, 100]
}, {
"name": "Wirtschaft",
stack: 0,
"data": [100, 100]
}, {
"name": "Politik",
stack: 1,
"data": [100, 100]
}, {
"name": "Panorama",
stack: 1,
"data": [100, 100]
}, {
"name": "Kultur",
stack: 1,
"data": [100, 100]
}, {
"name": "Wirtschaft",
stack: 1,
"data": [100, 100]
}]
}
You can use showInLegend parmater and set it as false, on "second" serie of the same name. Then use linkedTo param.
Example: http://jsfiddle.net/7p34o3w5/1/
Related
I'm using Highchart to create a donut chart with a rounded corner. Unfortunately, the chart is not fully circular.
var data2 = [
{
"data": [
{
"name": "Positve",
"y": 50,
"color": "#2CA02C",
"sliced": true
},
{
"name": "Negative",
"y": 25,
"color": "#B23333",
"sliced": true
},
{
"name": "Neutral",
"y": 25,
"color": "#E5CF73",
"sliced": true
}
]
}
]
window.mychart = Highcharts.chart('container', {
chart: {
type: 'pie',
plotShadow: false,
},
credits: {
enabled: false
},
plotOptions: {
pie: {
innerSize: '100%',
borderWidth: 10,
borderColor: null,
slicedOffset: 6,
dataLabels: {
connectorWidth: 0,
enabled: false
}
}
},
title: {
verticalAlign: 'middle',
floating: true,
text: ''
},
legend: {
},
series: data2,
});
Here is the jsfiddle link to it:
JsFiddle
Only one point can be sliced, so use data without the sliced property or set slicedOffset to 0.
"data": [{
"name": "Positve",
"y": 50,
"color": "#2CA02C"
},
{
"name": "Negative",
"y": 25,
"color": "#B23333"
},
{
"name": "Neutral",
"y": 25,
"color": "#E5CF73"
}
]
Live demo: http://jsfiddle.net/BlackLabel/1usgc4a6/
API Reference:
https://api.highcharts.com/highcharts/series.pie.data.sliced
https://api.highcharts.com/highcharts/series.pie.slicedOffset
How can I prevent this space:
I try a lot but no success.
Here is my options:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
"categories": []
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle link
Thanks in advance.
Remove the empty category definition on the yAxis to make highchart automatically generate values for the yAxis:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle working example: http://jsfiddle.net/ewolden/sq1hf68r/
I have this simple bubble chart https://jsfiddle.net/zengoric/4qyqokgj/
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
series: [{
"name": "First data set",
"data": [{
"x": 0,
"y": 2,
"z": 4.61,
}],
"sizeByAbsoluteValue": true,
}, {
"name": "Second data set",
"data": [{
"x": -1,
"y": -3,
"z": 4.6,
}],
"sizeByAbsoluteValue": true
}]
});
but it display nothing. Something is wrong with data or it's a bug in highcharts library?
You have to initialize zMin or/and zMax properties to make bubbles visible.
Live demo: https://jsfiddle.net/BlackLabel/gs2dr565/
Bubbles are too small to be drawn in the example that you provided.
API references:
https://api.highcharts.com/highcharts/series.bubble.zMin
https://api.highcharts.com/highcharts/series.bubble.zMax
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path
I have made a Highcharts chart with grouped and stacked columns, like in the example found here: http://www.highcharts.com/demo/column-stacked-and-grouped. The example shows a number of fruits for 5 different persons, grouped by gender. What I miss in this example, is an x-axis label showing the name of the group (male or female) underneath each group. Is it possible to add this to the chart?
Here is a simplified version of the chart I'm trying to make: http://jsfiddle.net/WQjVP/66/. It shows the number of open (blue) and overdue (red) issues for three locations in a case handling system. The left column in each group shows the numbers for that location for July, and the right column in each group shows the numbers for August for the same unit. What I would like to do is to show the month under each column, so that the first column will have "Jul", the second will have "Aug", the third will have "Jul" and so on, between the column and the location label.
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: ["Location A","Location B","Location C"],
title: {
text: "Location"
}
},
yAxis: {
allowDecimals: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === 0) {
return null;
}
return this.y;
},
style: {
color: 'white'
}
}
},
column: {
stacking: 'normal',
borderWidth: 0
}
},
series: [{
"color": "rgb(0,0,255)",
"name": "open",
"data": [18, 2, 6],
"stack": "Jul"},
{
"color": "rgb(255,0,0)",
"name": "overdue",
"data": [0, 0, 0],
"stack": "Jul"},
{
"color": "rgb(0, 0, 255)",
"name": "open",
"data": [20, 1, 10],
"stack": "Aug"},
{
"color": "rgb(255, 0, 0)",
"name": "overdue",
"data": [2, 1, 2],
"stack": "Aug"
}]
});
Try to use stackedLabels.
yAxis: {
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
},
formatter: function() {
return this.stack;
}
}
}
Demo
reference