Tachograph chart

Question

Hey guys, is it possible to create tachograph chart with your Flutter package? I am trying but i don't get too much success :D
Below you can see how that chart should look like, can you please tell me is this achievable?
https://cdn.discordapp.com/attachments/798262161892966420/964093987524841502/unknown.png

Aleksandar · Answer

So on yAxis are statuses(String) and on xAxis are hours in 12 hours format.

Yuvaraj Gajaraj · Answer

Hi Aleksandar,Greetings from Syncfusion. You can use the stepLineSeries to
achieve the graph as you expected. As of now, the y axis did not support
the categoryAxis (supports
for numeric and log axes). So, you can pass the string values on the x-axis and
enable the isTransposed property
in the chart, then enable the opposedPosition property
on the y-axis it will help you to achieve your requirement. We have attached a
sample for your reference below.UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#transpose-the-seriesRegards,Yuvaraj.Attachment: f174414_d235d98e.zip

Aleksandar · Answer

Thank you very much, thats close but I was able to do this by myself, my concern is about 12hours format and overall design of a chart, is it possible to archive exact same design as provided in screenshot?
You dont need to create it, just give me a hint. :)

Yuvaraj Gajaraj · Answer

Hi Aleksandar,You can achieve this with some customization, and we have
provided some hints as per your requirement.
 The
     x-axis can be the date-time axis and there you can give the required data
     and format it with dateFormat property as per your wish.
 For
     the y-axis, as stated earlier, we don't have category axis support,
     however using the axisLabelFormatter callback,
     you can change the label. But for this, set the minimum, maximum, and
     interval for the y-axis and then use the axisLabelFormatter callback to
     change the label.
 Then
     to render the customized series, onCreateRenderer callback
     can be used. Here to render the series with different width, and color,
     you can use the override the paint method and customize the series as per
     your wish. We already have a demo sample for customizing the series which
     can be found below 
UG: https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreaterendererDemo Sample: https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/data_label/data_label_template.dartIf the x-axis with date-time values and y-axis with
axisLabelFormatter callback doesn't work properly in your customization, then
kindly stick to the solution which we have provided in our previous update.Regards,Yuvaraj.

Aleksandar · Answer

Thanks for the reply, I have manage to made progress, but I am not there yet.
Can you help me and tell me how can this paint color always be on top, as you can see on picture, there is a strange bug where this blue Stepline is visible on yellow Paint.

Bug screenshot: https://cdn.discordapp.com/attachments/961550030173524021/966622297022664704/Screenshot_2022-04-21_at_10.49.37.png

My code: https://cdn.discordapp.com/attachments/961550030173524021/966622727190487080/Screenshot_2022-04-21_at_10.52.51.png

Yuvaraj Gajaraj · Answer

Hi Aleksandar,We have analyzed your code snippet attached to the last
query and found that you are calling the super in onPaint method.
When calling the super.onPaint, it renders the default StepLineSeries again
after your customer rendering is completed. So, please call the super before
your custom renders or avoid calling the super in the onPaint method. This is the
reason for StepLine get rendered on yellow paint.If you have any further queries, please get back to us.Regards,Yuvaraj.