Displaying timeline/log information together with chart data

We are evaluating the Blazor Chart component for a use-case with my client.

We are dealing with electrical car charging data. which consists of both the raw measurement data itself.

e.g. 5 amperes at a given point in time. but also log information like "swapping from 1 phase to 3 phase"

Our first attempt at displaying the log entries on top of the chart did not turn out too well.

We tried to combine markers in one dataset with the measurements in a line chart.

It works. but doesn't look great.

Bild3.png 


Is there some other way which would be better?

I know about chart annotations, but I'm not seeing how that would help untangle events close to each other.



1 Reply

SB Sridevi Bharathi Manohar Syncfusion Team January 12, 2022 04:22 PM UTC

Hi Roger, 

Greetings from Syncfusion. 

We have analyzed your query. We suggest you to use ChartAnnotations with CoordinateUnits as Point in chart to achieve your requirement. We have prepared sample based on your requirement. Please check with below snippet and sample. 

<ChartAnnotations> 
        <ChartAnnotation X="@data" Y="65" CoordinateUnits="Units.Point"> 
            <ContentTemplate> 
                <div style="background-color: black; color: white; font-size: medium; font-style: italic; transform: rotate(90deg)">Highest Medal Count</div> 
            </ContentTemplate> 
        </ChartAnnotation> 
        <ChartAnnotation X="@data1" Y="65" CoordinateUnits="Units.Point"> 
            <ContentTemplate> 
                <div style="background-color: black; color: white; font-size: medium; font-style: italic; transform: rotate(90deg)">Highest Medal Count</div> 
            </ContentTemplate> 
        </ChartAnnotation> 
</ChartAnnotations> 

 



Please let us know if you have any concerns. 

Regards, 
Sridevi Bharathi.

Loader.
Up arrow icon