stripLines

• October 18, 2018 at 8:37 pm #23116
  
  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)?

  October 22, 2018 at 9:35 am #23129
  
  Priyanka M S

  @mihaela,

  Sorry, this feature is not available as of now.

  __
  Priyanka M S
  Team CanvasJS

  October 23, 2018 at 1:32 am #23162
  
  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.

  October 23, 2018 at 1:47 am #23163
  
  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

  October 23, 2018 at 1:49 am #23164
  
  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

  October 23, 2018 at 5:42 pm #23177
  
  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

  October 23, 2018 at 9:04 pm #23179
  
  robertlight

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

  October 26, 2018 at 7:54 pm #23228
  
  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?

  October 29, 2018 at 10:50 am #23235
  
  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

  October 29, 2018 at 7:48 pm #23247
  
  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

  October 30, 2018 at 2:32 am #23249
  
  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

  October 30, 2018 at 11:00 am #23253
  
  Priyanka M S

  @mihaela,

  Please take a look at this JSFiddle.

  __
  Priyanka M S
  Team CanvasJS

  November 16, 2018 at 4:34 am #23467
  
  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.

  November 16, 2018 at 10:15 am #23469
  
  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