I am stuck in a problem where bubble chart series is not plotting - inspite of doing it according to HighCharts example tutorial.
There is no error on browser console as well making it really difficult for me to figure out.
Following is the data received from AJAX onSuccess response:
d:"[{"id":"3","name":"Australia","x":"24.1","y":"19.9","z":"3.5"},{"id":"1","name":"England (STA)","x":"23.8","y":"20.5","z":"2.6"},{"id":"5","name":"Germany","x":"22.8","y":"20.9","z":"2.3"},{"id":"2","name":"Spain","x":"17.8","y":"22.2","z":"1.4"}]"
Below is full code where I binded it to HighCharts:
function ShowMaturityGraph() {
var params = {};
params.countryIDList = "1,2,3,5";
params.xAxis = "1";
params.yAxis = "2";
params.bubbleSize = "6";
$.ajax({
type: "POST",
url: "default.aspx/GetMaturityValues",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
visitorData(response.d);
},
failure: function (response) {
alert(response.d);
}
});
}
function visitorData(data) {
alert(data);
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Maturity Values'
},
subtitle: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
labels: {
format: ''
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: ''
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: ''
},
labels: {
format: ''
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: '',
x: -10
},
zIndex: 3
}]
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
//format: '{point.name}'
}
}
},
series: $.parseJSON(data),
});
}
How about something like that i am using your data. You change it as you pleased. its high chart example with data provided above in the question.
Highcharts.chart('container', {
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: [{
"id": "3",
"name": "Australia",
"x": 24.1,
"y": 19.9,
"z": 3.5
}, {
"id": "1",
"name": "England (STA)",
"x": 23.8,
"y": 20.5,
"z": 2.6
}, {
"id": "5",
"name": "Germany",
"x": 22.8,
"y": 20.9,
"z": 2.3
}, {
"id": "2",
"name": "Spain",
"x": 17.8,
"y": 22.2,
"z": 1.4
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
hope that helps.
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 want to slide in Highcharts view , Now i just slide from 'rangeSelector'.This are my code , please help me . I don't know how to set configurations ----------------- The data are too many , but i think the data is no problem , I think the problem is my configuration ~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
this.Highcharts = Highcharts.stockChart(`${this.wrapId}`,
{
chart: {
// zoomType: "x"
plotBackgroundColor: "rgb(255, 255, 255)",
backgroundColor: "rgb(255, 255, 255)",
events: {
redraw: function() {
let series = this.series[0];
},
render: function() {}
}
},
title: {
text: ""
},
subtitle: {},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
second: '%m/%d %H:%M',
minute: '%m/%d %H:%M',
hour: '%m/%d %H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
// tickInterval: 60 * 1000, // 刻度线 1分种
lineColor: "rgb(230, 230, 230)",
lineWidth: 2,
gridLineWidth: 1,
gridZIndex: 1,
tickPosition: "outside", // 刻度
tickColor: "transparent", // 刻度颜色
gridLineColor: "transparent",
range:3600000,
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
// 下导航
enabled: true
},
scrollbar: {
enabled: true
},
// 数据提示框
tooltip: {
enabled: true,
backgroundColor: "white",
borderColor: "white",
style: {
color: "black",
zIndex:5,
}
},
yAxis: [
{
top: "0%",
height: "50%",
title: {
text: ""
},
endOnTick: true, // 强制结束于Y轴
// markers:false,
crosshair: true, // 横轴
dashStyle: "shortdot",
crosshair: {
width: 1.5,
color: "white",
dashStyle: "dash"
},
plotLines: [
{
width: 2,
color: "rgb(239, 197, 114)",
value: this.startValue,
dashStyle: "Dash",
label: {
text: `<span style="color:white;background:rgb(239, 197, 114);border-radius:3px;padding:2px 2px 0 2px;">${
this.startValue
}</span>`,
align: "right",
useHTML: true,
y: -5,
x: 0
},
zIndex: 3
}
],
gridLineWidth: 1,
gridZIndex: 1,
gridLineColor: "rgb(230, 230, 230)",
opposite: true
},
{
top: "56%",
height: "42%",
tickAmount:4,
}
],
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get("rgba")
]
]
},
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
candlestick: {
upLineColor: "transparent", // docs
upColor: "rgb(235, 106, 101)",
color: "rgb(121, 170, 111)"
},
macd: {
color: "rgb(199, 103, 103)",
marker: {
enabled: false,
lineColor: "rgb(39, 40, 61)",
states: {
hover: {
enabled: false
}
}
}
}
},
series: [
{
name:"MA",
type: "candlestick",
id: "candlestick",
data: this.data,
fillColor: "",
lineColor: "",
allowPointSelect: false,
index: 4,
colors: ["rgb(235, 106, 101)", "rgb(121, 170, 111)"],
events:{
drag(a){
}
}
},
{
name:"MA1",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA1,
},
{
name:"MA2",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA2,
},
{
name:"MA3",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA3,
},
{
name:"MA4",
type: "line",
yAxis: 0,
allowPointSelect: false,
index: 5,
data: this.data_.MA4,
},
{
// Two different zones:
type: 'macd',
yAxis: 1,
linkedTo: 'candlestick',
},
// {
// type: "macd",
// yAxis: 1,
// data:this.data,
// linkedTo: 'candlestick',
// // allowPointSelect: false,
// index: 4
// },
{
name:"DEA",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DEA,
},
{
name:"DIF",
type: "line",
yAxis: 1,
allowPointSelect: false,
index: 5,
data: this.data_.DIF,
},
]
})
I am creating a highcharts columnrange chart. I want a custom legend so that the legend would display according to "legendGrouping" and the associated colour for that series. From the jsfiddle example below I would expect the legend to show:
Running (green)
Failure (red)
Non-Failure (yellow)
Excluded (grey)
Here is the jsfiddle so far.
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
Thanks all
Used series.bar.linkedTo to make common legend for Excluded (3 events).
legend.labelFormatter to format legend
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
symbolPadding: 0,
symbolWidth: 0.1,
symbolHeight: 0.1,
symbolRadius: 0,
useHTML: true,
labelFormatter: function() {
//console.log(this.userOptions.legendGrouping)
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
"<span> " + this.userOptions.legendGrouping + " </span>" +
'</div>'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
Or
If you can update series data and add color as attribute as you added in series data. And also remove colorByPoint: true,
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true,
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
useHTML: true,
labelFormatter: function() {
return this.userOptions.legendGrouping
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
color: '#6cc14c',
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
"color": "#fde54a",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
"color": "#d9534f",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
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' }]
}]
});
});
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]
}]
});
});