Nagachandra
Reputation: 21
Spline graph with xAxis dateTime the line starts extremeleft/origin overlapping colorband on yAxis
I have a spline graph with xAxis DateTime the line starts from the origin overlapping on the color band I have on the yAxis. How to force the plotline as well as the xAxis labels to start after the color band ends on the yAxis.
Current Behavior Where line and label overlap on the color band in y-axis
Expected Behavior without overlap on the color band
Please find the jsfibble link https://jsfiddle.net/s9qwj1h3/
Thanks in advance
chart: {
height: 250
},
title: {
text: null
},
credits: {
enabled: false
},
legend: {
align: "center",
layout: "horizontal",
verticalAlign: "bottom",
alignColumns: false,
itemDistance: 10,
symbolHeight: 12,
symbolWidth: 12,
itemStyle: {
fontSize: "11px !important"
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%b-%d-%Y',
second: '%b-%d-%Y',
minute: '%b-%d-%Y',
hour: '%b-%d-%Y',
day: '%b-%d-%Y',
week: '%b-%d-%Y',
month: '%b-%d-%Y',
year: '%Y'
},
min: null,
max: null,
labels: {
style: {
fontSize: "10px !important",
color: "#000"
}
},
gridLineColor: "transparent",
gridLineWidth: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: "transparent",
tickLength: 0,
style: {
fontSize: "10px !important",
color: "#000"
}
},
yAxis: [
{
min: 0,
max: 100,
width: 20,
tickInterval: 20,
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
}
],
gridLineWidth: 0,
title: {
text: ""
},
labels: {
style: {
fontWeight: 'bold',
color: 'black'
},
x: -7,
y: 3,
formatter: function () {
return this.value;
}
}
},
{
linkedTo: 0,
gridLineColor: 'white',
lineColor: "transparent",
title: {
text: ""
},
labels: {
enabled: false
}
}
],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter() {
return "";
}
}
},
series: {
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
},
enableMouseTracking: true,
borderWidth: 1,
borderColor: "#FFFFFF",
threshold: 0, // let zero values have some height
marker: {
enabled: false
},
minPointLength: 10,
events: {
legendItemClick: function () {
return true;
}
}
}
},
tooltip: {
useHTML: false,
shared: false,
followPointer: false,
formatter: function () {
return this.point.tooltip;
}
},
series: [
{
"color": "rgb(0,187,221)",
"data": [
{"x":1601490600000,"y":25},
{"x":1601577000000,"y":34},
{ "x":1601663400000,"y":10},
{ "x":1601749800000,"y":12},
{ "x":1601836200000,"y":25},
{ "x":1601922600000,"y":28},
{ "x":1602009000000,"y":30},
{ "x":1602095400000,"y":22},
{ "x":1602181800000,"y":24},
{ "x":1602268200000,"y":44},
{ "x":1602354600000,"y":25},
{ "x":1602441000000,"y":34},
{ "x":1602527400000,"y":10},
{ "x":1602613800000,"y":12},
{ "x":1602700200000,"y":25},
{ "x":1602786600000,"y":28},
{ "x":1602873000000,"y":30},
{ "x":1602959400000,"y":22},
{ "x":1603045800000,"y":24},
{ "x":1603132200000,"y":44},
{ "x":1603218600000,"y":25},
{ "x":1603305000000,"y":34},
{ "x":1603391400000,"y":10},
{ "x":1603477800000,"y":12},
{ "x":1603564200000,"y":25},
{ "x":1603650600000,"y":28},
{ "x":1603737000000,"y":30},
{ "x":1603823400000,"y":22},
{ "x":1603909800000,"y":24},
{ "x":1603996200000,"y":44},
{ "x":1604169000000,"y":25},
{ "x":1604255400000,"y":34},
{ "x":1604341800000,"y":10},
{ "x":1604428200000,"y":12},
{ "x":1604514600000,"y":25},
{ "x":1604601000000,"y":28},
{ "x":1604687400000,"y":30},
{ "x":1604773800000,"y":22},
{ "x":1604860200000,"y":24},
{ "x":1604946600000,"y":44},
{ "x":1605033000000,"y":25},
{ "x":1605119400000,"y":34},
{ "x":1605205800000,"y":10},
{ "x":1605292200000,"y":12},
{ "x":1605378600000,"y":25},
{ "x":1605465000000,"y":28},
{ "x":1605551400000,"y":30},
{ "x":1605637800000,"y":22},
{ "x":1605724200000,"y":24},
{ "x":1605810600000,"y":44}
],
"name": 'ABC',
"type": 'spline'
},
{
"color": "rgb(154,2,42)",
"data": [
{"x":1601490600000,"y":50},
{"x":1601577000000,"y":30},
{ "x":1601663400000,"y":40},
{ "x":1601749800000,"y":42},
{ "x":1601836200000,"y":86},
{ "x":1601922600000,"y":50},
{ "x":1602009000000,"y":60},
{ "x":1602095400000,"y":75},
{ "x":1602181800000,"y":80},
{ "x":1602268200000,"y":85},
{ "x":1602354600000,"y":50},
{ "x":1602441000000,"y":30},
{ "x":1602527400000,"y":40},
{ "x":1602613800000,"y":42},
{ "x":1602700200000,"y":86},
{ "x":1602786600000,"y":50},
{ "x":1602873000000,"y":60},
{ "x":1602959400000,"y":75},
{ "x":1603045800000,"y":80},
{ "x":1603132200000,"y":85},
{ "x":1603218600000,"y":50},
{ "x":1603305000000,"y":30},
{ "x":1603391400000,"y":40},
{ "x":1603477800000,"y":42},
{ "x":1603564200000,"y":86},
{ "x":1603650600000,"y":50},
{ "x":1603737000000,"y":60},
{ "x":1603823400000,"y":75},
{ "x":1603909800000,"y":80},
{ "x":1603996200000,"y":85},
{ "x":1604169000000,"y":50},
{ "x":1604255400000,"y":30},
{ "x":1604341800000,"y":40},
{ "x":1604428200000,"y":42},
{ "x":1604514600000,"y":86},
{ "x":1604601000000,"y":50},
{ "x":1604687400000,"y":60},
{ "x":1604773800000,"y":75},
{ "x":1604860200000,"y":80},
{ "x":1604946600000,"y":85},
{ "x":1605033000000,"y":50},
{ "x":1605119400000,"y":30},
{ "x":1605205800000,"y":40},
{ "x":1605292200000,"y":42},
{ "x":1605378600000,"y":86},
{ "x":1605465000000,"y":50},
{ "x":1605551400000,"y":60},
{ "x":1605637800000,"y":75},
{ "x":1605724200000,"y":80},
{ "x":1605810600000,"y":85}
],
"name": 'XYZ',
"type": 'spline'
}
]
});```
Upvotes: 0
Views: 57
Answers (1)
Sebastian Wędzel
Reputation: 11633
You can define the yAxis.width as a negative and set the same positive value as yAxis.offset to move the yAxis.
yAxis: [
{
max: 100,
width: -50,
offset: 50,
tickInterval: 20,
...
}
]
Demo: https://jsfiddle.net/BlackLabel/59n2sv8c/
API: https://api.highcharts.com/highcharts/yAxis.offset
Upvotes: 0
Related Questions
- Plotline to touch the yaxis
- Highchart columns chart overlaps yAxis.plotLines labels
- highcharts reversed yAxis but keep fill area below spline?
- Overlap data on spline chart in Highcharts
- Highcharts plotLines with multiple xAxis and yAxis
- Display yAxis label on a diagonal line
- Make Highcharts' setExtremes off tick with two yAxis
- Spline graph date on x axis
- How to fix xAxis(datetime) scale in Highcharts?
- HighCharts - timeseries chart - irregular datetime interval on xAxis