Blazor ApexCharts Custom Tooltip - How to style like original Tooltip?

26 views Asked by At

I'm using the Blazor ApexCharts for making some charts in my app and I would like to use a custom Tooltip so I can add some additional information to the tooltip. I can see how to create the tooltip from the documentation: (https://apexcharts.github.io/Blazor-ApexCharts/features/tooltip-dotnet)

<DemoContainer>
<ApexChart TItem="Order"
           Title="Order Net Value"
           Options=options>

    <ApexPointTooltip>
        <div class="p-1">

            <h3>@context.DataPoint.X </h3>
                <Row class="mb-2">
                    <RowCol Auto>
                        <Badge style="background-color:#FF0000">Gross Value</Badge>
                    </RowCol>
                    <RowCol Auto>
                        <span class="@(context.SeriesIndex == 0 ? "strong": "")">
                            @context.DataPoint.Items.Sum(e=> e.GrossValue).ToString("n0")
                        </span>
                    </RowCol>
                </Row>

                <Row>
                    <RowCol Auto>
                        <Badge style="background-color:#000080">Net Value</Badge>
                    </RowCol>
                    <RowCol Auto>
                        <span class="@(context.SeriesIndex == 1 ? "strong": "")">
                            @context.DataPoint.Items.Sum(e=> e.NetValue).ToString("n0")
                        </span>
                    </RowCol>
                </Row>
         
        </div>
    </ApexPointTooltip>

    <ChildContent>
        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Gross Value"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
                         OrderByDescending="e=>e.Y"
                         Stroke="@(new SeriesStroke { Color = "#FF0000", Width=4})" />

        <ApexPointSeries TItem="Order"
                         Items="Orders"
                         Name="Net Value"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
                         OrderByDescending="e=>e.Y"
                         Stroke="@(new SeriesStroke { Color = "#000080", Width=4})" />
    </ChildContent>
</ApexChart>

My issue is that this style looks nothing like the original style that I use in all my other charts. Here is an example showing what that looks like: https://apexcharts.github.io/Blazor-ApexCharts/line-charts

Can anyone help me to style the custom tooltip to look more like the original tooltip? Ideally it would pull in the series Name automatically instead of relying on hard coding the string in ("Gross Value" and "Net Value").

Also why does the custom tooltip show data points, while the standard tooltip chart does not show data points? The linked examples show this behavior. I have this same behavior on my chart. If I switch to using a custom tooltip I also get datapoints added to my line chart.

0

There are 0 answers