I am working with highcharts, but first let me explain.
The graph needs these items / options
- each bar should have its own width (done)
- each bar should have its own color (done)
- a line with the avarage level (done)
However, there is one thing I can't get working: On the xaxis is need the names of the bars (like here: http://www.highcharts.com/demo/column-rotated-labels).
I've tried different methods, and if I use method 1 I can't set custom bar widths, if I use method 2 I can't set the titles on the x-axis. Anybody an idea?
My code so far:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
},
credits: {
enabled: false,
},
title: {
text: ''
},
xAxis: {
type: 'category',
title: {
text: 'Kerntaken',
},
labels: {
enabled: true,
},
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: [{
title: {
text: 'Gemiddeld niveau',
},
allowDecimals: false,
plotLines: [{
color: 'black',
value: '2', // Insert your average here
width: '1',
zIndex: 5, // To not get stuck below the regular plot lines
label: {
text: 'gemiddeld niveau',
align: 'right',
y: 12,
x: 0
}
}],
},{
title: {
text: ''
},
allowDecimals: false,
},{
title: {
text: ''
},
allowDecimals: false,
},{
title: {
text: '',
},
opposite: true,
}],
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.2f}</b><br/>',
},
series: [{
name: "Kerntaken",
colorByPoint: true,
colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 20,
data: [{
name: "Adviseren",
y: 3.2,
drilldown: "Adviseren",
}],
}, {
name: "Kerntaken",
colorByPoint: true,
colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 50,
data: [{
name: "Analyseren",
y: 1.5,
drilldown: "Analyseren",
}]
}, {
name: "Kerntaken",
colorByPoint: true,
colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 30,
data: [{
name: "Organiseren",
y: 3.9,
drilldown: "Organiseren",
}]
}, {
name: 'CP niveau',
type: 'spline',
data: [2],
tooltip: {
headerFormat: 'gemiddeld niveau<br>',
},
}],
});
My fiddle with my code so far: https://jsfiddle.net/Mik3yZ/L181kpqt/2/
Hi, can you check if it's this that you want?
I changed your series data to this:
{
name: "Apples",
colorByPoint: true,
colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 20,
data: [3.2, 0, 0],
}, {
name: "Bananas",
colorByPoint: true,
colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 50,
data: [0, 1.5, 0]
}, {
name: "Oranges",
colorByPoint: true,
colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 30,
data: [0, 0, 3.9]
}
You were giving the data an object, but it's expecting an array. I set 0's in the values to balance the sets in the other columns.
In the first object data attribute, the first value is for the apples in the first column. If you change the second value you will get apples in the second column and so forth. In this fiddle you have apples in all the columns.
Here is the updated fiddle for your answer.
You don't have to fill data with nulls, neither with zeros, but you can simply provide x index in the point. I'm not sure if that is really suitable for your use-case with drilldown (and categorized axis), but may be enough:
Example for data:
series: [{
name: "Kerntaken",
colorByPoint: true,
colors: ['#c8173c', '#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 20,
data: [{
x: 0, // added x-position
name: "Adviseren",
y: 3.2,
drilldown: "Adviseren",
}],
}, {
name: "Kerntaken",
colorByPoint: true,
colors: ['#f2d38d', '#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 50,
data: [{
x: 1, // added x-position
name: "Analyseren",
y: 1.5,
drilldown: "Analyseren",
}]
}, {
name: "Kerntaken",
colorByPoint: true,
colors: ['#e2584d', '#6f2236', '#4e787a', '#867e97', '#000000'],
pointWidth: 30,
data: [{
x: 2, // added x-position
name: "Organiseren",
y: 3.9,
drilldown: "Organiseren",
}]
}, {
name: 'CP niveau',
type: 'spline',
data: [2],
tooltip: {
headerFormat: 'gemiddeld niveau<br>',
},
}],
Now, as I said before, disable grouping from columns:
plotOptions: {
column: {
grouping: false
}
}
And working demo: http://jsfiddle.net/xkjqtcq3/3/
Extra note:
You have a lot of extra commas in your code, just be aware it will cause errors in IE < 9.
You need to change the series data format like this. Since you are using multiple series, you should have the mapping category values(here null) for each series to show the correcsponding x-axis Labels.
series: [{
name: "Kerntaken",
pointWidth: 20,
data: [3.2,null,null]
}, {
name: "Kerntaken",
pointWidth: 50,
data: [null,1.5,null]
}, {
name: "Kerntaken",
pointWidth: 30,
data: [null,null,3.9]
}]
Here is the updated Fiddle, Hope this helps.
Related
I am working on highchart. I am trying to build a bar chart with a single entry against each category. Right now I am working on an example basic-bar. Below is the output
Expected Output
I want a single entry against each category. For example against April, I want only one bar not multiple and so on
Here is the working jsFiddle
you just use the parameter visible:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [
/*{
visible: false,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
visible: false,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
visible: false,
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, */
{
visible: true,
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Bar chart showing horizontal columns. This chart type is often
beneficial for smaller screens, as the user can scroll through the data
vertically, and axis labels are easy to read.
</p>
</figure>
I'd like to change the color of a single point where its value is lower than 60%.
(For example, turn the blue color of two points which are in the pink area into a red color.)
Is this possible?
Thanks in advance!
Javascript:
Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
max: 100
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
color: 'blue',
pointPlacement: 'on',
data: [83, 79, 40, 35, 97, 80],
pointPlacement:'on',
}, {
name: 'lower than 60%',
data: [60,60,60,60,60,60],
pointPlacement: 'on',
lineWidth: 2,
type: 'area',
color: '#ffbce6',
dashStyle: 'shortdash',
}]
});
JS Fiddle
One of the options is to change the data for your Allocated Budget series to this:
data: [83, 79, {y:40, color:'red'}, {y:35, color:'red'}, 97, 80]
Check the updated fiddle https://jsfiddle.net/mpof48nu/
Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/
Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/
This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/
I want to create something similar to this in Highcharts:
with plotsbands that are unique to each bar.
I've managed to do this by creating one chart for each bar
but that doesn't scale very well:
http://jsfiddle.net/dffmgv5o/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 130
},
exporting: { enabled: false },
title: {text: ''},
xAxis: {categories: ['One category']},
yAxis: {
labels: {
enabled: false
},
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
},
plotBands: [{
color: 'green', // Color value
from: 0, // Start of the plot band
to: 35 // End of the plot band
}, {
color: 'orange', // Color value
from: 35, // Start of the plot band
to: 60 // End of the plot band
}, {
color: 'red', // Color value
from: 60, // Start of the plot band
to: 100 // End of the plot band
}]
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
name: 'Value',
data: [49],
color: '#444444',
dataLabels: {
enabled: true
},
pointWidth: 15
}]
});
$('#container2').highcharts({
chart: {
type: 'bar',
marginLeft: 130
},
exporting: { enabled: false },
title: {text: ''},
xAxis: {categories: ['Another category']},
yAxis: {
labels: {
enabled: false
},
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
},
plotBands: [{
color: 'red', // Color value
from: 0, // Start of the plot band
to: 35 // End of the plot band
}, {
color: 'orange', // Color value
from: 35, // Start of the plot band
to: 70 // End of the plot band
}, {
color: 'green', // Color value
from: 70, // Start of the plot band
to: 100 // End of the plot band
}]
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
name: 'Value',
data: [65],
color: '#444444',
dataLabels: {
enabled: true
},
pointWidth: 15
}]
});
$('#container3').highcharts({
chart: {type: 'bar',
marginLeft: 130},
exporting: { enabled: false },
title: {text: ''},
yAxis: {
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
}
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
dataLabels: {
enabled: true
}
}]
});
});
How can I do this by creating only one chart?
You can achieve that with three additional series (one series per color) with disabled grouping and correctly set bar width.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['One category', 'Another category']
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
grouping: false,
pointWidth: 30,
borderWidth: 0,
enableMouseTracking: false,
}
},
legend: {
enabled: false
},
series: [{
data: [100, 100],
linkedTo: 'main',
colorIndex: 5
}, {
data: [65, 55],
linkedTo: 'main',
colorIndex: 2
},{
data: [35, 15],
linkedTo: 'main',
colorIndex: 3
}, {
id: 'main',
data: [49, 65],
pointWidth: 15,
colorIndex: 0,
enableMouseTracking: true
}]
})
Live example and output
http://jsfiddle.net/crz1bs4m/
Hi I am using the Highcharts library to create a bar chart with a cumulative plot line as demonstrated in the jsFiddle below.
CHART DEMO
I am looking to have the cumulative series represented like the red line in the following image (with cumulative values plotted on the right-most axis):
SAMPLE OF DESIRED OUTPUT
As you can see the secondary Y Axis is flipped and is displaying the series index value rather than the actual cumuative values.
Here is the current code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null,
}
},
{
opposite:true,
title: {
text: "Cumulative"
}
}],
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Cumulative',
xAxis:1,
type:"spline",
data: [34, 732, 914, 1973, 4054]
}
]
});
How can I correct this in order to plot the series as intended?
Thanks!
What you can do is after loading add a new series based on the sum of the 2 series added at creation:
events: {
load: function () {
var s1900 = this.series[0].data;
var s2008 = this.series[1].data;
var newData = [];
if (s1900.length == s2008.length) {
for (var i = 0; i < s1900.length; i++) {
newData.push(s1900[i].y + s2008[i].y);
}
}
this.addSeries({
name: 'Cumulative',
xAxis: 0,
type: "spline",
data: newData
});
}
}
I am not sure why you want this on the opposite xAxis or why your curve in the linked image you supplied is not really the cumulative unless that is not what you really want. See live demo.
Note you are going to have to handle cases where not all points have a value or if one category is not in both series, etc etc etc.
Revised answer.
Assuming you want to have the same categories on the alternate xAxis and do not want to share the same yAxis you can do:
...
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
}, {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
opposite: true,
title: {
text: null
}
}],
yAxis: [{
min: 0,
endOnTick: false,
title: {
text: 'Population (millions)',
align: 'high'
}
}, {
min: 0,
opposite: true,
reversed: true,
endOnTick: true,
title: {
text: 'Cumulative Population (millions)',
align: 'high'
}
}],
...
This sets it up so that you have identical xAxis categories (other ways to do this). See new demo.