Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to always show the plotLine in HighCharts?

Tags:

I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.

HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.

Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.

Example:

    $(function () {         $(document).ready(function() {             var chart = new Highcharts.Chart({                 chart: {                     renderTo: 'container',                     type: 'column'                 },                 title: {                     text: 'Dummy Data by Region'                 },                 xAxis: {                     categories: ['Africa', 'America', 'Asia']                 },                 yAxis: {                     plotLines:[{                         value:450,                         color: '#ff0000',                         width:2,                         zIndex:4,                         label:{text:'goal'}                     }]                 },                 series: [{                     name: 'Year 1800',                     data: [107, 31, 650]                 }]             });         });              });​ 

JSFiddle for above code: http://jsfiddle.net/4R5HH/3/

The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.

like image 624
HRJ Avatar asked Oct 26 '12 10:10

HRJ


People also ask

What is plotlines in Highcharts?

An array of lines stretching across the plot area, marking a specific value on one of the axes. In styled mode, the plot lines are styled by the . highcharts-plot-line class in addition to the className option.

What is a Plotband?

A "Plotband" repesent a rectangualr area in the graph that can be given a specific pattern ranging from 3D grid to simple horizntal grid lines. A Plot band is then added to the graph via the Graph::AddBand() method. See also related classes: Graph.


2 Answers

One other option that does not introduce data points:

yAxis: {     minRange:450,     min:0,     plotLines:[{         value:450,         color: '#ff0000',         width:2,         zIndex:4,         label:{text:'goal'}     }] }, 

This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.

See updated fiddle.

like image 186
jank Avatar answered Sep 22 '22 09:09

jank


You need to add in a point to you chart but disable the marker. I added a new series with scatter plot type and its value equal to the goal value:

{      name: 'Goal',      type: 'scatter',      marker: {           enabled: false      },      data: [450] } 

See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/

like image 45
wergeld Avatar answered Sep 23 '22 09:09

wergeld