stripLines

[mihaela]

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)?

[Priyanka M S]

@mihaela,

Sorry, this feature is not available as of now.

__
Priyanka M S
Team CanvasJS

[robertlight]

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.

[DaringDan]

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

[DaringDan]

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

[robertlight]

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

[robertlight]

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

[mihaela]

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?

[Priyanka M S]

@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

[mihaela]

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

[mihaela]

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

[Priyanka M S]

@mihaela,

Please take a look at this JSFiddle.

__
Priyanka M S
Team CanvasJS

[mihaela]

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.

[Priyanka M S]

@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