stripLines: Object

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

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",
{
 .
 .
 axisX:{
    stripLines:[
            {
                
                startValue:1935,
                endValue:1945,                
                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

34 Comments

  1. Pingback: CanvasJS Version 1.4 Beta with StripLines, Legend Events & Empty Data Points in Chart | CanvasJS

  2. Craig Lathrop says:

    The StripLines appear to show behind the chart data instead of in front. This seems a bit odd. It would be great to either have an option to bring them to the front or probably be better just to have it default to in front of the data. I have only played around with this in a stacked area, maybe this issue is limited to that chart type.

  3. travis says:

    I’m wondering if it’s possible to set an offset for the position of the x stripline labels, currently they are going directly over the date/time portion of the x axis which makes it difficult to see all info. It would be nice if you could set an offset +- x/y that would move the label into the graph area or below the axis labels.

  4. Sunil Urs says:

    Travis,

    As of now it is not possible but we’ll consider for future version. Thanks for your suggestion.

  5. Jason Dunn says:

    I echo the request for an option to draw the strip lines on top of the plot data. In a bar chart with opaque bars the lines are not visible.

    • Anjali says:

      Jason,

      Sure, we’ll consider this for future versions. Meanwhile you can try setting fillOpacity property of dataSeries which will make the stripline partially visible.

    • Anjali says:

      vianece,

      Sorry, didn’t get your question. Do you mean to say you are trying to dynamically calculate and assign the value at the time of chart render??

  8. Vianece Jasmine Olazo says:

    yes, i’m getting the value of the startvalue and endvalue from a function. same function where i am getting the data points. for data points it works but for some reason the striplines end and startvalue cannot be assigned

  9. Nightflyer says:

    Would be very cool if these strip lines were draggable with evens like onleftdragstart, onleftdragend, onleftdragmove, onrightdragstart etc.

    • Leo says:

      This feature would be really useful. We use strip lines for showing events and sometimes they overlap closely, making the overlay text unreadable. Having a tooltip would make the chart cleaner and easier to read.

  12. Bruce Smith says:

    Is it possible to use a strip line value that is a string? My axisX contains labels not numbers. I’ve tried it by modifying the first example on this page but the strip line value, when set to a string, seems to evaluate to something to the left of the X axis.

    What I’m actually trying to do is set up a cross-hair using the mouseover and mouseout events to enable and disable striplines.

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Stripline on Axis X”
    },
    axisX:
    {
    stripLines:
    [
    {
    value :”four”,
    color:”#f00″
    }
    ],
    },
    data:
    [
    {
    type: “splineArea”,
    dataPoints:
    [
    { label: “one”, y: 5 },
    { label: “two”, y: 9 },
    { label: “three”, y: 17},
    { label: “four”, y: 32},
    { label: “five”, y: 22}
    ]
    }
    ]
    });
    chart.render();

  13. Travis says:

    Hello, I’m back again after a year and a half.

    Same question as before… I’d like to have a simple Y offset for the stripline label so that it won’t overlap with the X axis. Creating a scatterplot, as an example showed, is very difficult considering I would have to calculate the Y for all points in order to find the midpoint of the graph. Since this is Time vs Y value it is not very possible to do without rewriting the entire code. Even if the striplines would allow the ‘inside’ position like the data does would be better than nothing.

    Please advise.

  14. bob says:

    I found a way to get striplines on labels instead of x’s.
    dataPoints: [
    {
    label: ###,
    y: ###,
    x: 0-INF
    }
    Now just reference the x value with a stripline: [ {value=0-INF, thickness: 10} ]

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