Create custom chart

Question

I am trying to create chart like this with the emphasis on:

1. shade around the chart.

2. the graph will not be entirely the same color but green above the gray line and red below it (i was able to exercise with a gradient in the frame).

3. the point at the end.

I have this:

I an used AreaSeries, and with the border gradient property i solved the second point.

for the point at the end (third point) i am using onMarkerRender and if it is not last point, i put height and width 0.

now my question is:

Can i make the point in the end in the same color of the border without saying in directly?

Can i make a shadow around?

Marismathan Gurusamy · Answer

Hi Iyar,Greetings from Syncfusion. Kindly find the response to your queries below,Query 1: Can I make the point in the end in the same color of the border without saying in directly?We have analyzed this query and we would like to let you know that the marker color last point can be set based on the series border color by creating a custom series renderer by using the onCreateRenderer callback. On that custom series renderer, you need to override and use the drawDataMarker method. I have attached the reference sample here for this.https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps_marker_sample-1502769778Query 2: Can I make a shadow around?Currently, we don't have support for shadow support for series and we have already logged a feature request for this. You can track that status in below link,Feedback link: https://www.syncfusion.com/feedback/12926Thanks,Marismathan G

Iyar Avital · Answer

Thanks!I have one more question, I am trying to show a tooltip on top of the trackball, like that:in this tooltip, the value of the X-axis should be displayed.also I am trying to show a fixed tooltip with the value in axis Y, I am using this answer to implement it:https://www.syncfusion.com/forums/162727/how-to-display-trackball-tooltip-in-a-fixed-positionbut- if the format of the label is only the axis X, I am not found the right way to transfer the axis y value to the callback 'onTrackballPositionChanging'.how can i do that?thank you again, and have a nice day!

Marismathan Gurusamy · Answer

Hi Iyar,We have
analyzed your scenario and we suggest that you can follow the same steps
mentioned in this forum
to achieve the fixed tooltip and you can get the index value of data points
from onTrackballPositionChanging callback. You can get both x
and y values from the data source by utilizing that index value, and it may be
used for that fixed tooltip text. For your convenience, I've included a sample
of this below. You can also get the xPosition and yPosition of
the data point from chartPointInfo of onTrackballPositionChanging callback
and utilize that for positioning the tooltip. I have mentioned the comments and
codes related to this in the shared sample. Kindly revert us if you need
further assistance.

Thanks,Marismathan
GAttachment: fixed_tooltip_f3c222e7.zip

Iyar Avital · Answer

Thank you very much!

Iyar Avital · Answer

Hi again,  Can I add a controller somewhere to get flicker every X time?the left picture describes the flicker, but it can also be something else as long as it is dynamic.

Iyar Avital · Answer

I created a stateful widget with the show() function that shows this widget. this widget is my endpoint, he has the flicker inside and a timer to on and off. in order to show this widget just after chart animation, I will call to show() function, in the callback OnMarkerRenrer when the index is the last point.

I put my stateful widget in the annotation property, when coordinateUnit is point and the x and y values are the last point.

Workד great!

Marismathan Gurusamy · Answer

Hi Iyar,We are glad that you were able
to complete your scenario. Please contact us if you have any additional
questions.Thanks,Marismathan G