stripLines: Object

Comments 34

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

2. 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. 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. Travis,

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

   • Is this possible now? I’d really like to have the label for the stripline offset or moved on top of the graph, as right now it’s sticking way off the side of my graph.

     • please respond either way thank you.

       • DevW,

         We have decided to implement a feature to show labels inside the PlotArea. But we don’t have a timeline yet. For now you can workaround the issue as shown here.

         • Thank you very much for your prompt and helpful response. This is exactly what I need.

     • We have released v1.8.1 Beta with labelPlacement and labelAlign feature which will allow you to do the same using the api directly.

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

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

6. Would be great to be able to customize the text a bit. For example, increase padding to left and right. Thanks!

   • Robert,

     Thanks for your suggestion. We’ll consider it for future versions.

7. Can I set the startValue and endValue from a different function?

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

   • vianece,

     Can you please create a jsfiddle with your sample code. So that we can have a look.

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

10. Hi,

    Is it possible to make a 9box matriz – http://1.bp.blogspot.com/-T7FkjzLfRy0/UTDOTVEGY4I/AAAAAAAAA1g/aXKkVJXS2a8/s1600/Talent+Matrix.png

    Using striplines or using gridLines?

    • Im using scatter type

      • Hi,
        This is not possible as of now but we will consider it in the future.

11. Is it possible to show a tooltip when mouse moving on the striplines ?

    • As of now striplines doesn’t support tooltip.

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

      • Leo, You can set labelAlign:”near” to one stripLine and labelAlign:”far” or “center” to another, to avoid overlapping. Here is an example.

12. 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();

    • Seems all my careful formatting of the code was deleted. :-(

    • Bruce,

      stripeline value can accept only numeric or date format. Check this example for crosshair using stripline.

      • Would really enjoy seeing at least stripline value: ###, thickness: ##

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

    • Travis,

      labelPlacement has been added in our previous release. And you can also have a look at labelAlign property of StripLines.

14. 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} ]

15. Hi, I am trying to get vertical lines that connect the bars on my Range Bar Chart, like so:

    http://ffm.freshfocuscrm.com/Driving%20Log/bar_with_lines.png

    Currently, my chart looks like this (with no vertical connector lines):

    http://ffm.freshfocuscrm.com/Driving%20Log/bar_without_lines.png

    Does anyone know if there is any styling/javascript I can use to accomplish this?

    Thanks!

    • Kelsey,

      You can have vertical connector lines by adding one extra dataPoint in-between line breaks. Check this example.