Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to extend or highlight a horizontal line in Highcharts?

I'd like to create kind of a baseline in my chart, where there a multiple columns, and a horizontal line of value "1", which starts at the y-axis and goes beyond the last column. See this example:

enter image description here

Now, I have created something similar, but it's not yet succeeded:

enter image description here

The series code is simple:

            series:
            [{
                type: 'column',
                data: [4.05,2.81,2.1,1.20,0.37]
            },
            {
                type: 'line',
                name: 'Globale Biokapazität',
                data: [1,1,1,1,1]
            }]

Is there any parameter I can set to extend the line? Or is there any other way to highlight a line?

Thanks for any hints!

like image 343
luftikus143 Avatar asked Mar 05 '13 09:03

luftikus143


People also ask

What is plotOptions in Highcharts?

The plotOptions is a wrapper object for config objects for each series type. The config objects for each series can also be overridden for each series item as given in the series array. Configuration options for the series are given in three levels. Options for all series in a chart are given in the plotOptions.

How many types of Highcharts are there?

Highcharts supports a long list of different chart types, among others line , spline , area , areaspline , column , bar , pie , scatter , gauge , arearange , areasplinerange and columnrange .

What is legend in Highcharts?

The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend. It is possible to override the symbol creator function and create custom legend symbols.

How do you make a Highchart graph?

We will start off by creating a simple bar chart. Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your chart. A chart is initialized by adding the JavaScript tag, <script> </script> , anywhere in a webpage, containing the following code.


2 Answers

There are a lot of example about plotLines

Just use something like this:

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

one of them: DEMO

like image 188
AliRıza Adıyahşi Avatar answered Nov 11 '22 13:11

AliRıza Adıyahşi


You have two options:

  • use plotLine instead: http://api.highcharts.com/highcharts#xAxis.plotLines

  • change data format, with fixed min and max:

         xAxis: {
             min: 0,
             max: 5
         },
         series:
        [{
            type: 'column',
            data: [4.05,2.81,2.1,1.20,0.37]
        },
        {
            type: 'line',
            name: 'Globale Biokapazität',
            data: [[-0.5, 1] , [5.5, 1]]
        }]
    
like image 3
Paweł Fus Avatar answered Nov 11 '22 13:11

Paweł Fus