I have designed a spline highcharts JSFiddle(https://jsfiddle.net/s9qwj1h3/) where I need help in below 2 points:
-
x-axis date values count should be 12 irrespective of data. If I get 1 year data or 3 or 5 year data, count on x-axis should be 12. I tried tickpositions and tickpositioner but not able to resolve my issue.
-
data plotting should start after the color plot bands. data plotting should not be on the color plotbands. it should plot after the color plotbands.
Highcharts.chart('container', {
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'
}
]
});
from Highcharts - x-axis date interval data values count must be 12
No comments:
Post a Comment