Rendering markers at varying X-Coordinate and [Max & Fixed] Y-Coordinate

[dkumar]

Ref: https://jsfiddle.net/ydpnxc41/

If:
– we comment Line#3 i.e. let the library set the maxmium value of Y-Axis, the markers appear somewhere in the middle.
– we keep Line#3, i.e. set the maximum value of Y-Axis from outside, markers are partially outside the canvjas.

Ideally, we would want them to be at the top like the 2nd approach, but properly visible. Is there a way to offset them slightly ?

Also, another alternate we might accept that if striplines don’t go beyond the markers (I means striplines to be drawn from 0 to Y-coordinate of the marker)

[Sachin Bisht]

@dkumar,

To make markers to be completely visible you can set the axis-Y maximum to the maximum Y value of the datapoints plus half the marker size as shown in the code snippet below.

chart.axisY[0].set("maximum", chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(chart.axisY[0].get("maximum")) - chart.data[0].get("markerSize")/2));

Kindly refer to the updated JSFiddle for complete working example.

__
Sachin Bisht
Team CanvasJS

[dkumar]

At this moment,

Example: We need multiple markers like this on top of regular chart.

Unless we find another way to achieve the required implementation, We are considering forking the library and adding support to render scatter chart with only X-Axis-Coordinates and implicitly setting Y-Axis-Coordinates to be at the top of range rendered by the library.

FYI: We have purchased Unlimited Developer license.

[dkumar]

Please ignore this previous comment, it got moderated quite late.

@sachin-bisht
The approach suggested by you is working fine. I’ll post here if we need further help. Thankyou!

[dkumar]

Though this approach is working fine technically. But for us, marker appears somewhere in the middle of steplines of y-axis.
So, Instead of exactly the same value as maxY, is there a way to fix the markers on the next y-stepline (which is actually the max bound on y-axis)?

[Sachin Bisht]

@dkumar,

You can fix the maximum y-value of the data set to the top most gridline of Y-axis by dynamically setting the Y-axis minimum and maximum to minimum and maximum of the data set. And In case the gridline does not align with the maximum y-value of the data points, you can make use of y-axis stripline to represent the same. Kindly refer to this JSfiddle for the working example on the same.

If you still facing issue, kindly share a sample project along with the data and brief us more about your issue so that we can understand the scenario better and help you out.

__
Sachin Bisht
Team CanvasJS