The plotline should spread across the graph but the plot band should of smaller width.
1) Initially without width being set.
2) When y axis width is set to 20
3) I want something like this where both the plot band and the plotline co exists
this is the fiddle code link to what I have tried so far. Can someone please help me out thank you very much in advance.
https://jsfiddle.net/mncfy80p/
chart: {
type: "column",
height: 205,
plotBackgroundColor: "#D3D3D3",
width:250,
},
title : {
text:''
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: true
},
pointPadding: 0
}
},
xAxis: {
visible:false,
},
yAxis: {
title: {
text: ''
},
min : 0,
max : 100,
tickInterval : 10,
gridLineWidth: 0,
plotLines: [{
value: 70,
color: 'black',
dashStyle: "Solid",
width: 4,
zIndex: 5,
label: {
text: 39,
align: "right",
x: 2,
y: -5,
style: {
color: 'black',
fontWeight: "bold",
fontSize: "18px",
}
}
}],
plotBands: [
{
color: 'rgb(204,0,0)',
from: 0,
to: 30.99,
zIndex: 3,
},
{
color: 'rgb(226,113,113)',
from: 31,
to: 44.99,
zIndex: 3,
},
{
color: 'rgb(247,209,34)',
from: 45,
to: 54.99,
zIndex: 3,
},
{
color: 'rgb(136,207,136)',
from: 55,
to: 68.99,
zIndex: 3,
},
{
color: 'rgb(68,180,68)',
from: 69,
to: 87.99,
zIndex: 3,
},
{
color: 'rgb(0,153,0)',
from: 88,
to: 100,
zIndex: 3,
}
],
},
series: [{
dataLabels: {
color: "white",
verticalAlign: "bottom",
crop: false,
style: {
fontWeight: "Normal"
}
},
data: [{
y: 85,
color:'red',
dataLabels: {
formatter(){
return '<span style="font-size:11px;">A</span>';
},
y:-20
}
}, {
y: 72,
color:'green',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">B</span>';
},
y:-15
}
}, {
y: 83,
color:'blue',
dataLabels:{
formatter(){
return '<span style="font-size:11px;">C</span>';
},
y:-15
}
}],
showInLegend: false
}]
});
The simplest solution is to create another y-axis and move plot bands to it:
yAxis: [{
...,
plotLines: [...],
}, {
...,
plotBands: [...]
}]
Live demo: https://jsfiddle.net/BlackLabel/agq6ebjd/
API Reference: https://api.highcharts.com/highcharts/yAxis
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.