apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
788 stars 91 forks source link

ShowDuplicates in XAxisLabels not working #380

Closed sv-ed closed 7 months ago

sv-ed commented 8 months ago

Hello, I've noticed that ShowDuplicates is not working in Blazor-ApexCharts nuget v2.2.1. I've created a small sample where I duplicate the X axis labels with ShowDuplicates = true and I noticed that the label gets duplicated but the last data is not present in the chart and the line chart is not drawn.

In the sample the checkbox enables/disables the duplicated label on the X axis to easily see the label changes. The expected behaviour is to fully see the line chart when the label is duplicated.

Here is the sample code:

@page "/"
@rendermode InteractiveServer

<div class="container">

    @*toggle the checkbox to duplicate the label*@
    <input type="checkbox" @onchange="OnChange" />

    @*chart*@
    <ApexChart TItem="Data" Title="Test" @ref="_chart" Options="@_options" Height="400">
        <ApexPointSeries TItem="Data"
                         Items="_data"
                         Name="Title"
                         SeriesType="SeriesType.Line"
                         XValue="@(e => e.Label)"
                         YValue="@(e => (decimal?)e.Value)" />
    </ApexChart>
</div>

@code {

    public class Data
    {
        public string Label { get; set; }
        public int Value { get; set; }
    }

    private List<Data> _data = new List<Data>();
    private bool _isDuplicated = false;
    private ApexChart<Data> _chart = new ApexChart<Data>();
    private ApexChartOptions<Data> _options = new ApexChartOptions<Data>();

    protected override async Task OnInitializedAsync()
    {
        _data.Add(new Data() { Label = "a", Value = 1 });
        _data.Add(new Data() { Label = "b", Value = 2 });
        _data.Add(new Data() { Label = "c", Value = 3 });
        _data.Add(new Data() { Label = "d", Value = 4 });

        _options.Xaxis = new XAxis()
        {
            Labels = new XAxisLabels()
            {
                ShowDuplicates = true, // enable duplicates labels on X
            },
        };
    }

    protected void OnChange()
    {
        _isDuplicated = !_isDuplicated;
        _data[2].Label = _isDuplicated ? "b" : "c"; // duplicate "b" in X labels
        _chart.UpdateOptionsAsync(true, true, true);
    }
}
joadan commented 7 months ago

Hello,

I believe ShowDuplicates is only valid for DateTime XAxisType

sv-ed commented 7 months ago

Hi, I see, thanks for the response. Have a nice day!