I would like to know what is the best/essayist way to debug an HTML element in an Hover state when using a JS library (in my example: Highcharts).
This library is using CSS but also real-time manipulation of the DOM with JS.
For example, in the attached JS fiddle there is an Highcharts Scatter map and I would like to know what are ALL to properties that the tool-tip (that appears when you hover one of the dots) has.
I saw in similar questions here that in firebug I can simulate the CSS rules of an Hover state for an element, but I did not see any answer about how to debug when CSS and JS are been used together.
Is there any option of "stacking" the page in the hover state, so I could examine the entire state?
example jsFiddle
$(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: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
]
}]
});
});
.highcharts-tooltip h3 {
margin: 0.3em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
What you can do is open your site in Chrome, hit F12 which is the Web developer toolbar, then hover over the element you want to test.
Then select from the top right the plus sign next to the Thumbtack , select the thumbtack
Once that is done you can select what state you want
At that point you would write a css :hover to see the state occur. (copy and save frequently though).
Related
3 slices in my pie chart fall under same category. It's the gray slices (174, 29, 234). Is it possible to overlay text on cover all 3 slices. Can the overlay text be rotate or curved in order to cover the grey slices.
Here is my working fiddle: https://jsfiddle.net/1h8p257c/
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1',
y: 234,
color:'#808080',
legendIndex: 1
}, {
name: 'Consent Order 2',
y: 29,
color:'#C0C0C0',
legendIndex: 2
}, {
name: 'Consent Order 3',
y: 174,
color:'#DCDCDC',
legendIndex: 3
},{
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
If they're all the same category, why not just combine them like so:
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Types of Actions'
},
subtitle: {
text: 'October 31, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
size:230,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: -50,
format: '{point.y:f}',
color:'black'
},
showInLegend: true
}
},
legend: {
align: 'left',
verticalAlign: 'middle',
layout:'vertical'
},
series: [{
name: 'Types',
colorByPoint: true,
data: [{
name: 'Consent Order 1 - 3',
y: 437,
color:'#808080',
legendIndex: 1
}, {
name: 'Not Likely',
y: 165,
color:'#1E90FF',
legendIndex: 4
}, {
name: 'No Testing',
y: 2,
color:'#FF0000',
legendIndex: 5
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>
<div id="container"></div>
Or does the separation matter?
You can use Highcharts.SVGRenderer to add additional text to the chart:
events: {
load: function(){
var center = this.series[0].points[2].shapeArgs;
this.renderer.text(
'someText',
center.x + this.plotLeft - 20,
center.y + this.plotTop + 50
).attr({
fill: 'red',
'font-size': '20px',
rotation: -45,
zIndex: 10
})
.add();
}
}
Live demo: https://jsfiddle.net/BlackLabel/t04gqy2h/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
I have been trying to modify the look of highcharts bars and I have managed to make the horizontal bar charts to look like progress bar charts. I followed this answer here in SO in order to do that. Right now, I am having two problems with this. The chart looks fine if I have one data series but here is how it looks if I have more than one series (there can be up to 3 series).
Therefore, I want to increase the margin between the labels (USA, Japan etc). Secondly, I would like to align the data labels (10, 40, 20 etc) towards the right of the chart, outside the bars. I think I need to write some javascript but I am not sure where to start or what to modify. Any help is appreciated.
Thanks.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -13,/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
align: 'right'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
https://jsfiddle.net/fbsveysb/
Use groupPaddingfor increasing the space between column groups.
The default value of dataLabels.align is left (point on the left side of the label) - this value should be used to position data labels outside of the bars.
Live working demo: https://jsfiddle.net/kkulig/w782cud7/
API references:
https://api.highcharts.com/highcharts/series.bar.dataLabels.align
https://api.highcharts.com/highcharts/series.bar.groupPadding
This may be one of the possible solution as I made in comment. It uses Scrollbars for any axis which shows how to have scroll in axis. It uses highstock.js file, it can be applied to regular Highcharts axes.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: '#003755',
marginBottom: 60,
marginLeft: 80,
marginTop: 40,
marginRight: 140,
events: {
load: function() {
var maxVal = 0;
for (var i = 0; i < this.series.length; i++) {
if (Math.max.apply(Math, this.series[i].yData) > maxVal) {
maxVal = Math.max.apply(Math, this.series[i].yData)
}
}
this.yAxis[0].setExtremes(0, maxVal + 10)
}
}
},
colors: ['#0AA3DB', '#3AC6B1', '#000612'],
xAxis: [{
categories: ['USA', 'Japan', 'Canada', 'Brasil', 'China', 'Russia', 'UK', 'France', 'NA'],
labels: {
align: 'left',
x: 0,
y: -20,
/* to be adjusted according to number of bars*/
style: {
fontSize: "0.875rem",
color: '#fff'
}
},
lineColor: 'transparent',
tickLength: 0,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
}],
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
}
},
plotOptions: {
bar: {
grouping: true,
pointPadding: 0,
dataLabels: {
allowOverlap: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
},
series: {
pointWidth: 8, //width of the column bars irrespective of the chart size
borderRadius: 5,
borderColor: 'transparent',
dataLabels: {
enabled: true,
//format: '{point.y:.1f}',
format: '<b>{point.y:,.0f}</b>',
shared: true,
useHTML: true,
overflow: 'none'
}
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
yDecimals: 2
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<b>{point.name} - {point.y:,.0f}%</b>',
shared: true,
useHTML: true
},
series: [{
name: 'Current',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2005',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}, {
name: '2023',
type: 'bar',
data: [{
name: 'USA',
y: 10
}, {
name: 'Japan',
y: 40
}, {
name: 'Canada',
y: 20
}, {
name: 'Brasil',
y: 5
}, {
name: 'China',
y: 9
}, {
name: 'Russia',
y: 8
}, {
name: 'UK',
y: 7
}, {
name: 'France',
y: 1
}, {
name: 'NA',
y: 0
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
I'm producing Highcharts bubble charts based on user selected data.
I'd have expected the bubbles on the charts to be proportionally sized to each other (i.e. the bubble for a '2' is consistent through multilpe charts) however, it seems to be based on the range of points on the chart.
This is highlighted in this fiddle
As you can see, the '2's in chart #2 are the same size as the '6' in chart #1.
I'd like the '2' in chart #2 to match the size of the '2' in chart #1.
Is there any way of achieving this ?
Here's the code:
jQuery(function () {
var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 2, z: 2, label: 'data #3' },
{ x: 3, y: 3, z: 3, label: 'data #4' },
{ x: 4, y: 4, z: 4, label: 'data #5' },
{ x: 5, y: 5, z: 5, label: 'data #6' },
{ x: 6, y: 6, z: 6, label: 'data #7' }];
var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' },
{ x: 1, y: 1, z: 1, label: 'data #2' },
{ x: 2, y: 1, z: 1, label: 'data #3' },
{ x: 3, y: 2, z: 2, label: 'data #4' },
{ x: 4, y: 2, z: 2, label: 'data #5' },
{ x: 5, y: 1, z: 1, label: 'data #6' },
{ x: 6, y: 0, z: 0, label: 'data #7' }];
jQuery('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data1 }]
});
jQuery('#container2').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7']
},
yAxis: {
startOnTick: true,
min: -1,
max: 7,
showFirstLabel: false,
showLastLabel: false,
tickInterval: 1,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.label}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data2 }]
});
});
This is similar to what I had proposed as an answer to another bubble chart question elsewhere on Stack Overflow:
Highcharts 3.0 Bubble Chart -- Controlling bubble sizes
For your situation, it seems adding a transparent, non-interactive "dummy" bubble with the largest possible dimensions in your chart will keep each of the other bubbles in the proper proportions to one another:
series: [{ data: data2 },
// dummy series to keep all the bubbles in proportion
{name: 'dummy series',
data: [{x:6,y:6,z:6}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false}
]
Here's an updated version of your fiddle with this fix: http://jsfiddle.net/brightmatrix/svcuLgso/13/
Please let me know if this solves your issue!
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]
}]
});
});