I'm trying to create a butterfly chart using Highcharts. I want to plot it as
The Code is as follows
// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, /*{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}*/],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
});
});
Here is my fiddle link, how can I get my xAxis labels in between the series. Please guide me to achieve this.
I would approach this differently than morgan did, though that example is certainly useful.
I would do this as a standard bar chart, making use of multiple yAxis objects (one for each series), which also allows for using the reversed property of the left-facing series.
Code Example:
yAxis: [{
title: { text: null },
width: 200,
reversed: true
},{
offset: 0,
title: { text: null },
left: 300,
width: 200
}],
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
data: [...]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/L80cdxm0/
Example Output:
An inverted columnrange chart combines with the cross-specific-values plugin is a way to go. A column range chart allows you to specify position of the columns and make the space for labels. The plugin moves the axis to the center of the chart.
Highcharts.chart('container', {
title: {
text: 'Butterfly Chart Example'
},
subtitle: {
text: 'stackoverflow.com'
},
chart: {
type: 'columnrange',
inverted: true,
marginTop: 100
},
legend: {
verticalAlign: 'top',
y: 60,
x: -25,
itemDistance: 50
},
xAxis: {
categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
crossing: 118,
lineWidth: 0,
tickLength: 0,
},
yAxis: {
gridLineWidth: 0,
tickInterval: 50,
min: 0,
max: 250,
lineWidth: 1,
title: {
text: null
}
},
plotOptions: {
series: {
grouping: false
}
},
series: [{
name: 'South',
color: 'blue',
data: [
[55, 100],
[60, 100],
[65, 100],
[55, 100],
[75, 100],
[52, 100],
[60, 100]
]
}, {
name: 'North',
color: 'orange',
data: [
[120, 170],
[120, 150],
[120, 175],
[120, 130],
[120, 125],
[120, 148],
[120, 145]
]
}]
});
example: http://jsfiddle.net/7d4mrhuv/
Related
I have created one chart with one xAxis and dual yAxis (ER & ES). Now I need to represent one point which is not in the range of xAxis and ER yAxis.
Ex:
current xAxis data: ['58', '53', '48', '43', '38', '33']
current ER yAxis data: [3.23, 3.5, 4.6, 3.2, 4.6, 5.1]
And I need to represent optimal ER point like x-value: '95' & y-value: 9.8
Here is my fiddle with one xAxis and dual yAxis (ER & ES): http://jsfiddle.net/gy4h1xs7/
Something like below or any suggestion should be appreciated:
Could you please help me how to represent this optimal ER point in my graph?
Thanks in advance
Here's the idea :
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: ''
},
legend: {
layout: 'vertical',
itemStyle: {
cursor: 'default'
}
},
plotOptions: {
series: {
events: {
legendItemClick: function() {
return false;
}
}
}
},
xAxis: [{
title: {
text: ''
},
categories: ['95', '58', '53', '48', '43', '38', '33']
}],
yAxis: [{
title: {
text: 'ER'
},
lineWidth: 1,
gridLineColor: '#FFF',
plotLines: [{
value: 3.30,
dashStyle: 'shortdash',
width: 2,
color: '#B593CE'
}]
},
{
title: {
text: 'ES'
},
lineWidth: 1,
gridLineColor: '#FFF',
opposite: true
},
{
title: {
text: '2nd Y'
},
lineWidth: 1,
gridLineColor: '#FFF'
}
],
series: [{
yAxis: 0,
type: 'spline',
color: '#00B1F1',
data: [null, 3.23, 3.5, 4.6, 3.2, 4.6, 5.1]
}, {
yAxis: 1,
type: 'spline',
color: '#008D90',
data: [null, 324, 253, 356, 563, 367, 542]
}, {
yAxis: 2,
color: 'red',
data: [9.8],
type: 'spline'
}],
data: {
seriesMapping: [{
x: 0,
y: 1
}, {
x: 0,
y: 2
}, {
x: 0,
y: 3
}]
}
});
#container {
min-width: 320px;
height: 400px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
http://jsfiddle.net/kqfL43g7/
How can I configure the y axis so that it has different colors?
From this:
enter image description here
To this:
enter image description here
JSFIDDLE:
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
lineWidth: 2
},
Maybe someone had a similar problem?
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
You can achieve it by setting yAxis.lineColor as Highcharts.GradientColorObject. Check the demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
load: function() {
let chart = this,
yAxis = chart.yAxis[0];
yAxis.update({
lineColor: {
linearGradient: [chart.plotLeft + yAxis.width, 0, 0, 0],
stops: [
[0, 'yellow'],
[0.33, 'yellow'],
[0.33, 'red'],
[0.66, 'red'],
[0.66, '#21B04C'],
[1, '#21B04C']
]
}
})
}
}
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
yAxis: {
lineWidth: 4
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/7feLmsvq/
API reference:
https://api.highcharts.com/highcharts/yAxis.lineColor
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
https://api.highcharts.com/class-reference/Highcharts.GradientColorObject
I'm facing an issue with polar chart customization. I would like to have 4 nested circles (with labels) on yAxis with different series for each nested circle. Regardless of value that marker should be inside the circle defined for series.
$(function () {
var labels = ['Europe','Australia','North America','South America'];
var series1 = [1,2,3,4];
var series2 = [5,6,7,8];
var series3 = [1.5,2.5,3.5,4.5];
var series4 = [5.5,6.5,7.5,8.5];
var pointInterval = parseInt(360 / labels.length);
var chart;
chart= Highcharts.chart('div-radarChar', {
chart: {
polar: true,
},
credits: {
enabled: false
},
legend: {
enabled: true
},
title: {
text: 'Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
tooltip: {
formatter: function (pointInterval, tooltip) {
var header ='<span style="font-size: 10px">' + this.key + '</span><br/>';
var point = '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
return header + point;
}
},
xAxis: {
labels: {
style: {
"whiteSpace": "nowrap"
},
},
categories: labels
},
yAxis: {
min: 0
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
pointStart: 0,
marker: {
enabled: true,
symbol: 'circle',
radius: 10,
}
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
lineWidth: 0,
type: 'line',
name: 'Series 1',
data: series1,
fillColor:'#008000',
color: '#008000'
},
{
lineWidth: 0,
type: 'line',
name: 'Series 2',
data: series2,
fillColor:'#FFFF00',
color: '#FFFF00'
},
{
lineWidth: 0,
type: 'line',
name: 'Series 3',
data: series3,
fillColor:'#FFA500',
color: '#FFA500'
},
{
lineWidth: 0,
type: 'line',
name: 'Series 4',
data: series4,
fillColor:'#FF0000',
color: '#FF0000'
}
]
});
});
Here is the fiddle and this is the result I would like to get:
http://jsfiddle.net/mfwq1x7n/
https://i.imgur.com/dt47nCC.png
Any help/pointers will be much appraciated.
You can create a polar chart with separate yAxis for each series:
yAxis: [{
lineColor: 'red',
lineWidth: 3,
tickPositions: [0, 4, 8, 12, 16]
}, {
tickPositions: [0, 4, 8, 12, 16],
angle: 90,
lineColor: 'blue',
lineWidth: 3
}, {
tickPositions: [-4.5, -1.5, 1.5, 4.5, 7.5],
angle: 180,
lineColor: 'black',
lineWidth: 3
}, {
tickPositions: [-3.5, -0.5, 2.5, 5.5, 8.5],
angle: 270,
lineColor: 'pink',
lineWidth: 3
}]
Live demo: http://jsfiddle.net/BlackLabel/06ohs1yr/
API Reference: https://api.highcharts.com/gantt/yAxis.tickPositions
I cant seem to fix the Y axis scales on my chart. My JSFiddle code is here.
As you hover over the lines, the value that pops up does not match the scales on the Y Axes (Example, when you put your cursor towards the center of the graph, the Black Line has the value of 60% but when you look at the Y axis scale, it says 200%).
How would I go about fixing the Y axes so they show the appropriate values? I'm trying to make it so Signal Strength shows 0%-100%, Main Power 0-24V and Temperature showing 30F-120F.
Code:
function createChart() {
Highcharts.stockChart('container', {
alignTicks: false,
rangeSelector: {
selected: 4
},
chart: {
renderTo: 'container',
height: 500,
alignTicks: false
},
yAxis: [{ // Primary yAxis
tickAmount: 8,
tickInterval: 1,
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: false
}, { // Secondary yAxis
tickAmount: 8,
tickInterval: 10,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
tickAmount: 8,
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: [{
name: 'Main Power',
type: 'spline',
yAxis: 1,
data: [24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
tooltip: {
valueSuffix: ' V'
}
}, {
name: 'Signal Strength',
type: 'spline',
yAxis: 2,
data: [20, 30, 40, 50, 60, 60, 60, 60, 70, 76, 78, 80],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Temperature',
type: 'spline',
yAxis: 0,
data: [70, 70, 76, 75, 78, 72, 80, 73, 75, 78, 72, 73],
tooltip: {
valueSuffix: ' °F'
}
}]
});
Removed the "percent" in:
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
In highchart area chart, how could I set the area color above certain value to different color?
My target graph is like this:
However, what I see right now is like this:
http://jsfiddle.net/brianpchsu/0kwgocp4/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
min: 0,
max: 100,
pointRange:10,
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'Power'
}
},
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 0,
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
series: [{
data: [
[0, 2500],
[10, 2600],
[20, 2700],
[30, 2800],
[40, 2900],
[50, 3000],
[60, 3100],
[70, 3200],
[80, 3300],
[90, 3400],
[100, 3500],
],
color: '#FF0000',
negativeColor: '#1B8753',
threshold: 3000
}]
});
});
You could use zones.
Example: http://jsfiddle.net/0kwgocp4/1/
zones: [{
color: '#1B8753',
value: 3000
},{
color: '#FF0000'
}]