Home forums Using CanvasJS stripLines

This topic contains 13 replies, has 4 voices, and was last updated by  Priyanka M S 23 hours, 43 minutes ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #23116

    mihaela
    Member

    Is it possible to change the angle for the strip lines labels (for strip lines on the X axis the labels are by default aligned at 90 deg, would like to change at 0 deg same as default x axis labels)?

    #23129

    Priyanka M S
    Member

    @mihaela,

    Sorry, this feature is not available as of now.

    __
    Priyanka M S
    Team CanvasJS

    #23162

    robertlight
    Member

    is there a way of adding new stripLines? I see how existing stripLines can be modified, but I don’t see how I would add a new stripLine.

    #23163

    DaringDan
    Member

    I would recommend adding a scatter dataset with the point centered at x + ((y-x)/2). To make it “invisible”, I used

    type: “scatter”,
    indexLabelOrientation: “horizontal”,
    indexLabelFontColor: “black”,
    toolTipContent: null,
    highlightEnabled: false,
    showInLegend: false,
    fillOpacity: 0,
    dataPoints: strip_line_labels

    where strip_line_labels was formatted as such:
    strip_line_labels.push({
    x: strip_lines[i].startValue + ((strip_lines[i].endValue – strip_lines[i].startValue) / 2),
    y: 9,
    indexLabel: strip_lines[i].label
    });

    Hope this helps,
    Dan

    #23164

    DaringDan
    Member

    Also, to add new stripLines, have a stripLines array and set it as your chart’s stripLines.

    After that, any updates to the stripLines variable will be reflected onto the chart once you
    chart.render()

    Dan

    #23177

    robertlight
    Member

    Thanks for the suggestions… I’ll take a look at type=scatter.

    I actually tried the approach of having stripLines be an array that gets updated before the chart.render()…. that didn’t work. Only the stripLine data that was used to create the chart at the beginning get displayed.

    – Bob

    #23179

    robertlight
    Member

    I take back my earlier comment that I tried the approach of modifying the stripLines array… this indeed does work.

    #23228

    mihaela
    Member

    Is there any workaround to rotating the labels back to horizontal, any suggestions on to get around this issue?
    Do you guys have plans to address this in the future releases?

    #23235

    Priyanka M S
    Member

    @mihaela,

    You can add data-series of scatter type to horizontally align labels on stripLines. Please take a look at this JSFiddle.

    Do you guys have plans to address this in the future releases?

    This feature is not there in our roadmap as of now.

    __
    Priyanka M S
    Team CanvasJS

    #23247

    mihaela
    Member

    Hi Priyanka,

    Thanks for the responses. In our application we only need vertical lines and not strips like in your jsfiddle example (basically startValue=endValue) with horizontal labels placed close to the line. I have tried the scatter option but didn’t work very well for this purpose because of labels placement when zooming in, etc. Then I changed to the strpLines option on axisX which worked much better with the only issue that the labels are vertically aligned which makes them harder to read (in this case it is just a marker with a single letter label like ‘P’, doesn’t look good vertical).
    If you can offer any suggestion / workaround it would be highly appreciated.
    Thanks!

    Mihaela

    #23249

    mihaela
    Member

    Hi Priyanka,

    We also need to be able to move these strip lines so to respond to mouse click events. To make use of the the click event we need to go back to data-series of scatter type as the striplines on axis do not have the click event, si that correct?

    Thanks,
    Mihaela

    #23253

    Priyanka M S
    Member

    @mihaela,

    Please take a look at this JSFiddle.

    __
    Priyanka M S
    Team CanvasJS

    #23467

    mihaela
    Member

    Very useful example. Thanks.
    For changing the cursor while dragging the stripLine in your fiddle you use
    $(this).css(“cursor”,”pointer”)
    Is the cursor change in relation with the datapoints or can it be applied to the entire chart regardless of mouse position relative to datapoints, if yes how?
    In my application I have trouble getting it to change, but I am not using the scatter datapoints like in your example, just the stripLines on the x axis.

    #23469

    Priyanka M S
    Member

    @mihaela,

    You can customize the cursor to the entire chart as per your requirement by applying the style to canvasjs-chart-canvas class.

    .canvasjs-chart-canvas {
     cursor: pointer !important;
    }

    __
    Priyanka M S
    Team CanvasJS

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.