Related
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
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>
i want to show high charts meter gauge where i need to show the reading -20 to 0 (-20,19,18,17,16....0) not like (-20,-10,0)
see fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-vu-meter/
code
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'VU meter'
},
pane: [{
startAngle: -50,
endAngle: 50,
background: null,
center: ['25%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '145%'],
size: 300
}],
tooltip: {
enabled: false
},
yAxis: [{
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 6,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 6,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
name: 'Channel A',
data: [-20],
yAxis: 0
}, {
name: 'Channel B',
data: [-20],
yAxis: 1
}]
}
);
Change chart.yAxis.min and chart.yAxis.max:
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'VU meter'
},
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '145%'],
size: 300
}],
tooltip: {
enabled: false
},
yAxis: [{
min: 0,
max: 20,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 15,
to: 20,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 10,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 10,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
name: 'Channel A',
data: [10],
yAxis: 0
}, {
name: 'Channel B',
data: [-10],
yAxis: 1
}]
},
// Let the music play
function (chart) {
setInterval(function () {
if (chart.series) { // the chart may be destroyed
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
rightVal,
inc = Math.random() - 0.5;
leftVal = left.y + inc;
rightVal = leftVal + inc;
left.update(leftVal, false);
right.update(rightVal, false);
chart.redraw();
}
}, 500);
});
Is this what you are looking for? JSFiddle
I simply changed the max and min fields in y-axis and changed the javascript function to accommodate the new intervals.
EDIT: I didn't understand the question before, but according to your comment this should work. JSFiddle
EDIT2: Only now I saw you edited the question. Updated the link in EDIT to contain values from -20 to 0 (Before it was from 0 to 20).
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]
}]
});
});
I'm trying to add Highcharts to my page, but the problem is my DIV tag size is quite small (233px,98px) and I want to show minorTickInterval in it, but highcharts truncate them because of small DIV size.
http://jsfiddle.net/a62nhs7f/
Is there anyway to show the inner lines of the interval in the small size?
var options = {
title: {
text: ''
},
labels: {
enabled: false
},
title: {
text: '',
align: 'high',
enabled: false
},
subtitle: {
text: '',
align: 'high',
enabled: false
},
/*
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 10,
breakSize: 1
}]
},
*/
legend: {
enabled: false
},
yAxis: {
gridLineWidth:1,
lineWidth: 1,
min: 0,
//tickWidth: 1,
minTickInterval:5,
minorGridLineWidth:1,
minorTickInterval: 0.1,
minorTickLength: 2,
//type: 'logarithmic',
minorTickInterval: 5,
//minorTickInterval: 'auto',
//minorTickLength: 0,
title: {
text: '',
//align: 'high',
enabled: false
},
labels: {
//enabled: false,
style: {"font-size":'8px'},
formatter: function() {
return this.value;
}
}
},
xAxis: {
min: 0,
tickmarkPlacement: 'on',
title: {
enabled: false
},
labels: {
enabled: false
},
/*gridLineColor: '#c9d5ba',
gridLineWidth: '1',
lineColor: '#222222',
lineWidth: 0,*/
categories: [1.2, 2, 3.1, 4.3, 5.1, 5.9, 6.7, 7.5, 8.3, 9.1, 9.8, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
labels: {
formatter: function () {
return '<a style="color:green" data-value="' +[this.value] + '">' +
this.value + '</a>';
},
style: {"font-size":'8px'}
}
},
series: [{
data: [5.7, 11.1, 22.2, 38.1, 51, 66.6, 83.3, 101.1, 118.6, 135.7, 150.9, 161.4, 169.2, 172.8, 176.8, 178.5, 179.7, 179.9, 180, 179.9, 179.1]//,
//pointInterval: 500
}]
};
Thanks
You can disable the line markers. I think It is better solution for you.
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
Chek my demo.