apexcharts / Blazor-ApexCharts

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

Unix Timestamp on zooming to milliseconds (timeline) #460

Open QuentinBubu opened 1 month ago

QuentinBubu commented 1 month ago

Hi,

I apologize, but, when I would like to work with range bar charts for timelines, I have a problem with zoom. When zooming in to see the details, updating the X axis goes from minute to second, causing a display of timestamps. This happens when you want to scroll the graph with planning or zoom it with zoom selection. However, I have specified the expected date format with:

    Tooltip = new Tooltip
    {
        X = new TooltipX
        {
            Format = "dd MM yyyy HH:mm:ss.fff",
            },
        },
    }

Each of points on my timeline are stored in an object like that

    public class ChartRowPoints
    {

        /// <summary>
        /// Value on X
        /// </summary>
        public string? XValue { get; set; }

        /// <summary>
        /// Value on Y
        /// </summary>
        public decimal? YValue { get; set; }

        /// <summary>
        /// Start date of event
        /// </summary>
        public DateTime YMinValue { get; set; }

        /// <summary>
        /// End date of event
        /// </summary>
        public DateTime YMaxValue { get; set; }

        /// <summary>
        /// Dictionary with all data
        /// </summary>
        public IDictionary<string, string> Data { get; set; } = new Dictionary<string, string>();
    }
<ApexRangeSeries TItem="ChartRowPoints"
    Items="serie.Series"
    XValue="@(e => e.XValue)"
    YMinValue="@(e => e.YMinValue.ToUnixTimeMilliseconds())"
    YMaxValue="@(e => e.YMaxValue.ToUnixTimeMilliseconds())"
    @attributes="serie.Attributes"
    ShowDataLabels
/>

This bug can be reproduced in the examples you have in the documentation.

You will find 2 demonstration videos, one on your site and the other in my case, locally

Best regards

https://github.com/apexcharts/Blazor-ApexCharts/assets/60854021/33747390-d53a-474e-9987-6e584a5e08e5

https://github.com/apexcharts/Blazor-ApexCharts/assets/60854021/b00d7051-bf7f-4877-849e-66181cb58013

joadan commented 1 month ago

Hi,

I think this is an question for the apexcharts.js repo. I don't think this has anything to do with the wrapper.