stripLines: Object

Strip Lines / Trend Lines are vertical or horizontal lines used to highlight/mark a certain region on the plot area. They are also referred to as Trend Lines. You can choose whether to draw a line at a specific position or shade a region on the plot area.

If you want to just mark a certain position on the caxis, you can set the value attribute and it’ll draw a line at that position with the set thickness. If you want to shade a region instead, you need to set startValue and endValue attributes. This will fill the area within the specified range.

In the case you set startValue and endValue attributes, value and thickness attributes are ignored (as either a single thread of line can exist, or a shaded region between two given points).

Strip Lines can be displayed using AxisX or AxisY’s stripLines array. This allows you to have one or more strip lines on both x & y axis.

Here is an example:

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 axisY:{
       stripLines:[
            {
                
                startValue:25,
                endValue:32,                
                color:"#d8d8d8",
                label : "Label 1",
                labelFontColor: "#a8a8a8",
            }
            ]
 },
 .
 .
});
chart.render();

Simple stripLine Attributes

Applies To Attribute Type Default Options/Examples
stripLines value Number null 12
stripLines startValue Number null 20
stripLines endValue Number null 30
stripLines thickness Number 1 5,10,20
stripLines color String “#FF7300” “green”,”#23EA23″
stripLines label String “” (empty string) “Threshold”,”Target”
stripLines labelPlacement String “inside” “inside”,”outside”
stripLines labelAlign String “far” “far”,”center”,”near”
stripLines labelWrap Boolean true true,false
stripLines labelMaxWidth Number Automatically Calculated based on label length 100, 200…
stripLines labelTextAlign String “left” “left”, “center”, “right”
stripLines labelBackgroundColor String “transparent” “red”,”#fabd76″
stripLines labelBorderColor String “transparent” “red”,”#fabd76″
stripLines labelBorderThickness Number 0 1,2,..
stripLines labelFontFamily String “Trebuchet MS, Helvetica, sans-serif” “Arial, Trebuchet MS, Tahoma, sans-serif”
stripLines labelFontColor String “orange” “blue”,”#4135e9″
stripLines labelFontSize Number 12 18,19,20,22
stripLines labelFontWeight String “normal” “lighter”,”normal”,”bold”,”bolder”
stripLines labelFontStyle String “normal” “normal”,”oblique”,”italic”
stripLines showOnTop Boolean false true, false
stripLines lineDashType String “solid” “dot”, “dash” etc.
stripLines opacity Number null .1, .2, .5 etc.
stripLines labelFormatter Function
–
–
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

20 Comments

  2. zadwhite says:

    How to make bold character in label of stripline. For Example ,” Musical Class ( 45 student ) ” . i want “45 student” in bracket is bold

  4. Jon says:

    Hi !
    Just a question : Can we limit a stripline on axis X ?
    Example :
    axisY:{
    stripLines:[
    {
    startValue:25,
    endValue:32,
    color:”#d8d8d8″
    limitAxisX : 1940 // Strip line stops at year 1940
    }
    ]
    }

    Thank you in advance for your answers and your really useful library ;).

  6. Veena Nidagundi says:

    If I have multiple striplines, how to set priority as which one to be shown on top in case all the lines overlap?

    • Sanjoy says:

      StripLines are rendered in the order of appearance in StripLines array. So, you can prioritize them according to your requirement.

  7. Jim Dunne says:

    How do we ensure stripLines are within the automatically calculated x- or y- axis range? I want the graph to always include my stripLines because they are goal markers so it would be helpful for the end user to know if they are above/below their goals.

  8. Kelvin says:

    stripLines:[
    {
    value:new Date(“”),
    color:”#000000″,
    showOnTop:”True”,
    label: ” Last”,
    labelPlacement:”inside”,
    labelFontColor: “#a8a8a8”
    }
    ]

    the labelPlacement is not working for me I want my label to be inside instead of outside…
    a little help here pls.

    • Sanjoy says:

      Kelvin,

      In javascript instance of Date with empty string is treated as Invalid Date. So, removing the empty string inside Date constractor should show the stripLine.

    • Sanjoy says:

      Martin Potančok,

      Yes, you can update stripline value by using chart.options (eg: chart.options.axisX.stripLines[0].value) and render it by calling chart.render().
      Please refer this example.

  10. Subhannita says:

    Is it possible to add showOnTop:true to multiple striplines?? I tried adding the feature to two striplines(at different values) and only the second one came on top while the first stripline completely disappeared….

If you have any questions, please feel free to ask in our forums. Ask Question