stripLines: Object

Strip 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 axis, 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 2 5,10,20
stripLines color String “orange” “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 labelBackgroundColor String “#eeeeee” “red”,”#fabd76″
stripLines labelFontFamily String “arial” “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 it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 20

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

  2. 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 ;).

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

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

  4. 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.

  5. 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.

    • 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.

    • 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.

  6. 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….

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.