CODEWITHSUNDEEP
javascriptjqueryhighcharts
user1170618
user1170618

Reputation:

plotBands Makes the plotLines Disappears highchart

when i use the plotbands between two points on the xaxis and the draw a line between these two points using pointLines it never appears but if you do the same on yAxis every thing works just fine here is my code 

  $(function () {
    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {        
        plotBands: [{ // mark the weekend
            color: 'rgba(68, 170, 213, 0.2)',
            from: Date.UTC(2010, 0, 2),
            to: Date.UTC(2010, 0, 4)
        }],
        plotLines:[{
         value: Date.UTC(2010, 0, 3),
                  color: 'green',
                  dashStyle: 'shortdash',
                  width: 2,
        }],
        plotLines:[{
         value: Date.UTC(2010, 0, 6),
                  color: 'green',
                  dashStyle: 'shortdash',
                  width: 2,
        }],
        tickInterval: 24 * 3600 * 1000, // one day
        type: 'datetime'
    },
    yAxis:{
        plotLines:[{
            value : 200,
            color: 'green',
                  dashStyle: 'shortdash',
                  width: 2,
        }] ,
         plotBands: [{ // mark the weekend
            color: 'rgba(68, 170, 213, 0.2)',
            from: 150,
            to: 250,
        }],  
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4 , 255.7],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
       }]
   });
 });​

i also jsFiddle it http://jsfiddle.net/MsCqR/3/

Upvotes: 1

Views: 3590

Answers (2)

Edu
Edu

Reputation: 1

Use zIndex to plotlines or plotbands posicition...

            plotLines: [{
                width: 3,
                color: "#808080"
            },{
                value: "200",
                width: 4,
                color: "#FF0000",
        zIndex: 4}],

Upvotes: 0

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

I think your problem is that if you want to set 2 plotLines you have to pass them thrue an array, like the following code:

plotLines:[{
    value: Date.UTC(2010, 0, 3),
    color: 'green',
    dashStyle: 'shortdash',
    width: 2,
}, {
   value: Date.UTC(2010, 0, 6),
   color: 'green',
   dashStyle: 'shortdash',
   width: 2,
}]

How to add more than 1 plot line: LINK1
How to edit plotLines' zindex: LINK2

Upvotes: 1

Related Questions