Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});
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/
I would like to use the highcharts age pyramid for men and women. Men and women can fall into three different categories. For example a, b and c. I would like to have a stacked bar for the three groups for men and women separately per age. Hopefully you can help me with this.
I have created the following age pyramid example, but as you can see, it has not yet been possible to add more than two groups.
JavaScript
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#3F7EBF'],
[1, '#1F3F5F']
]
},
}, {
data: [2, 5],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#980061'],
[1, '#4C0030']
]
},
yAxis: 1
}]
});
This is what i want to achieve in the end:
This chart type is not supported by Highcharts library out of the box.
However, something similar can be created using two charts next to each other with one axis reversed. Check demo and code posted below.
Code:
Highcharts.chart('container1', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
enabled: false
}
},
yAxis: {
min: 0,
reversed: true,
title: {
text: 'males',
align: 'high'
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [5, 3, 4]
}, {
name: 'B',
data: [2, 2, 3]
}, {
name: 'C',
data: [3, 4, 4]
}]
});
Highcharts.chart('container2', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['15-19', '20-21', '21-25'],
labels: {
align: 'center'
}
},
yAxis: {
min: 0,
title: {
text: 'females',
align: 'low'
}
},
credits: {
enabled: false
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'A',
data: [2, 4, 1]
}, {
name: 'B',
data: [5, 2, 1]
}, {
name: 'C',
data: [4, 1, 2]
}]
});
#container1 {
width: 45%;
float: left;
}
#container2 {
width: 55%;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
Demo:
https://jsfiddle.net/BlackLabel/cg5af2dz/
Just a multiple series of data
series: [{
name: 'A (m)',
data: [6, 2],
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
yAxis: 1
},
...
]
and stacking: 'normal'
series: {
stacking: 'normal'
}
solves the problem
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
height: 170,
marginLeft: 10
},
title: '',
plotOptions: {
bar: {
dataLabels: {
enabled: false,
}
},
series: {
stacking: 'normal'
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
offset: 0,
labels: {
enabled: true,
align: 'left',
x: -18
},
stackLabels: {
enabled: true,
align: 'right',
x: 20
},
title: {
text: 'age group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: -210,
text: 'males'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 210,
text: 'females'
},
stackLabels: {
enabled: true,
align: 'left',
x: -20
},
gridLineWidth: 0
}],
series: [{
name: 'A (m)',
data: [6, 2],
color: '#000',
yAxis: 1
}, {
name: 'B (m)',
data: [2, 2],
color: '#02aff1',
yAxis: 1
}, {
name: 'C (m)',
data: [2, 2],
color: '#e0301e',
yAxis: 1
}, {
name: 'A (f)',
data: [2, 2],
color: '#000',
}, {
name: 'B (f)',
data: [2, 2],
color: '#02aff1',
}, {
name: 'C (f)',
data: [6, 2],
color: '#e0301e',
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>
3 slices in my pie chart fall under same category. It's the gray slices (174, 29, 234). Is it possible to overlay text on cover all 3 slices. Can the overlay text be rotate or curved in order to cover the grey slices.
Here is my working fiddle: https://jsfiddle.net/1h8p257c/
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1',
y: 234,
color:'#808080',
legendIndex: 1
}, {
name: 'Consent Order 2',
y: 29,
color:'#C0C0C0',
legendIndex: 2
}, {
name: 'Consent Order 3',
y: 174,
color:'#DCDCDC',
legendIndex: 3
},{
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
If they're all the same category, why not just combine them like so:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1 - 3',
y: 437,
color:'#808080',
legendIndex: 1
}, {
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>
<div id="container"></div>
Or does the separation matter?
You can use Highcharts.SVGRenderer to add additional text to the chart:
events: {
load: function(){
var center = this.series[0].points[2].shapeArgs;
this.renderer.text(
'someText',
center.x + this.plotLeft - 20,
center.y + this.plotTop + 50
).attr({
fill: 'red',
'font-size': '20px',
rotation: -45,
zIndex: 10
})
.add();
}
}
Live demo: https://jsfiddle.net/BlackLabel/t04gqy2h/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
Angular2-highcharts is throwing a wierd exception when I am trying to port my existing graph. The code for my graph is as shown below:-
http://jsfiddle.net/kkulig/dx2vj8k1/
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: '50%',
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
rotation: 0,
x: 40
}
},
yAxis: [{
left: '55%',
width: '45%',
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: '45%',
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
});
When I try to port this to angular2-highcharts, I get a pretty bizarre error as shown below. What am I doing Wrong?
The plnkr is here http://plnkr.co/edit/UvOmYi?p=preview
The error which I see is below:-
The output of the above Plnkr is here.
This error is because of percentage issue while defining width,left,right.
angular2-highcharts is highcharts plugin for Angular is based on Typescript.
So you cannot use width: '45%', directly because it is string instead use width:window.innerWidth * .45.
http://plnkr.co/edit/Bp3O8SwWjwkLFCRkrQPa?p=preview
chart: {
type: 'bar',
marginLeft: 10
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
xAxis: {
left: window.innerWidth * .52,
categories: ['15-19', '20-21'],
lineWidth: 0,
tickWidth: 0,
labels: {
align: 'left',
x: -18
},
title: {
text: 'Age Group',
align: 'high',
x: 10
}
},
yAxis: [{
left: window.innerWidth * .55,
width:window.innerWidth * .45,
labels: {
enabled: false
},
title: {
x: -160,
text: 'Female'
},
gridLineWidth: 0
}, {
reversed: true,
width: window.innerWidth * .45,
offset: 0,
labels: {
enabled: false
},
title: {
x: 170,
text: 'Male'
},
gridLineWidth: 0
}],
series: [{
data: [1, 3]
}, {
data: [2, 5],
yAxis: 1
}]
};
The link below is the example of bubble overlapping, I want to know if I can show the data-label of the top overlapping bubble. In this case, show the label of the yellow bubble which is 'DE'.
- Example of overlapping
$(function () {
$('#container').highcharts({
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: 50, y: 50, z: 50, name: 'BE', country: 'Belgium', color:'red' },
{ x: 50, y: 51, z: 50, name: 'DE', country: 'Germany', color:'yellow' },
{ x: 100, y: 100, z: 50, name: 'DE', country: 'Germany' }]
}]
});
});