I am using Highcharts, I want to draw vertical lines on the values. Like;
How can I do that ? Thanks.
Here is my code
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area'
},
title: {
text: '<b> </b>'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b>';
}
},
xAxis: {
categories: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun'
],
plotBands: [{ // visualize the weekend
from: 5.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
plotOptions: {
area: {
pointStart: 1,
marker: {
enabled: false,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Visit',
data: [946, 733, 764, 887, 832,1423]
}, {
name: 'Unique',
data: [746, 633, 664, 687,702,1266]
}]
});
});
});
</script>
You will most likely have to use the Highcharts renderer for this task, as what you want to do doesn't quite fit in with a grid, and doesn't quite fit in with plot lines.
I have made a very simple example, based on your code which shows drawing an arbitrary vertical line, in a hard-coded location. To achieve your goal you will have to calculate a few things, such as the x/y position for the start point of each line, and the height of the line based on that points value.
Here's a slightly different example with zIndex and a line as you actually want it, using the V
path command to draw a vertical line.
I think you might be looking for Plot Bands and/or Plot Lines.
Here's some more information:
http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With