Blazor Apexcharts.js wrapper - Show all fields from series data in tooltip

Swedo 0
Viewed 31

I'm using the Blazor wrapper for Apexcharts.js to visualize some data (https://github.com/apexcharts/Blazor-ApexCharts).

The documentation is in Javascript and the examples don't seem to cover what I want, but then again it all seems quite confusing to me.

I have created an ApexChart like so:

Apexchart Html

My Class DataItemMachineStatusBar has a couple more fields that are not being used on the Axes but they are meant for the tooltip to provide some extra information when a data series is hovered.

What I can't figure out is how to show the rest of the fields of the linked class DataItemMachineStatusBar in the tooltip when a data series is hovered.

I would expect the possibility to pass the current data item of the hovered series to a function and return the wanted fields from that item in the tooltip. How can I accomplish this?

To clarify: My DataItemMachineStatusBar class has XValue = MachineID (see screenshot), when I hover the data series (= the bar drawn for 1 item in the list of DataItemMachineStatusBar items) I want to show e.g. field DataItemMachineStatusBar.TimePerPanel in the tooltip. The DataItemMachineStatusBar item is already linked to the bar, I just need a way to extract it and show the rest of the fields in the tooltip.

apexcharts blazor .net-6.0
1 Answers

You an show a custom tooltip by setting the ApexPointTooltip parameter of ApexChart. ApexPointTooltip is a RenderFragment parameter that you can use to specify the display template for the tooltip. The component passes a context object to the template that you can use to display the extra information.

<ApexChart TItem="DataItemMachineStatusBar"
           Items="productionStatusBarData"
           ...>

    <ApexPointTooltip>
        <div class="m-2">
            @{
                var point = (ListPoint<DataItemMachineStatusBar>)context.DataPoint;

                <h3>Show the extra information here</h3>
            }
        </div>
    </ApexPointTooltip>

    <ChildContent>
        ...
    </ChildContent>
</ApexChart>

Documentation:

https://apexcharts.github.io/Blazor-ApexCharts/features/tooltip

Dimitris Maragkos0
Related