Scatter plot with multiple points per label

[meronz]

Hi, I have seen on the ApexCharts.js docs that you can do a Scatter plot that has multiple points (Y axis) for each label on the X axis).

Example taken on ApexCharts.js docs:

I did not find a way of doing this in Blazor, even by enabling the grouping. It still doubles the label values. Scatters with a single point per x-axis value has little to no sense. How can I do this?

Blazor-ApexCharts:

Example code:

<DemoContainer>
    <ApexChart TItem="TemperatureRecord"
               Title="Scatter Sample (with multiple points per label)"
               GroupPoints="@_groupPoints"
               XAxisType="XAxisType.Category"
               Options="@_options">

        <ApexPointSeries TItem="TemperatureRecord"
                         Items="records"
                         SeriesType="SeriesType.Scatter"
                         Name="Temperature (C)"
                         XValue="@(e => e.Timestamp.ToString("yyyy-MM-dd"))"
                         YValue="@(e => e.Value)"/>
    </ApexChart>
</DemoContainer>

@code {
    public class TemperatureRecord
    {
        public DateTimeOffset Timestamp { get; set; }
        public decimal Value { get; set; }
        public decimal[] Values { get; set; }
    }

    public static List<TemperatureRecord> GetTemperatureRecords()
    {
        return new List<TemperatureRecord>()
        {
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-10), Values = new decimal[] { 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-9),  Values = new decimal[] { 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-8),  Values = new decimal[] { 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-7),  Values = new decimal[] { 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-6),  Values = new decimal[] { 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-5),  Values = new decimal[] { 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-4),  Values = new decimal[] { 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-3),  Values = new decimal[] { 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-2),  Values = new decimal[] { 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(-1),  Values = new decimal[] { 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39 } },
            new TemperatureRecord() { Timestamp = DateTimeOffset.Now.AddDays(0),   Values = new decimal[] { 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40 } }
        };
    }

    private static List<TemperatureRecord> records { get; set; } = GetTemperatureRecords()
        .SelectMany(x => x.Values.Select(y => new TemperatureRecord { Timestamp = x.Timestamp, Value = y }))
        .ToList();

    static ApexChartOptions<TemperatureRecord> _options = new()
    {
        Xaxis = new()
        {
            Type = XAxisType.Category,
            Group = new()
            {
                Groups = GetTemperatureRecords()
                    .Select(e => new XAxisGroup
                    {
                        Title = e.Timestamp.ToString("yyyy-MM-dd"),
                    })
                    .ToList(),
            },
        },
    };

    static GroupPoints _groupPoints = new()
    {
        Name = "Temperature (C)",
    };
}

[meronz]

I probably chose the wrong example since that chart shows multiple data series. This is the correct example:

[joadan]

Hi,

I'm sorry just to be clear what is the issue here? Do you want to create a chart like https://apexcharts.com/javascript-chart-demos/scatter-charts/basic/ ?

Have you checked the sample here: https://apexcharts.github.io/Blazor-ApexCharts/scatter-charts

[meronz]

Sorry if I haven't been clear. By looking more closely to better explain my problem, I found the solution. I was not setting XAxisType to XAxisType.Datetime on the chart.