Charts with dates, how to handle output

[GaryWayneSmith]

I might be a little dense, but I'm having issues presenting dates in a chart in the desired format. The graph is displaying the full format "yyyy-MM-ddThh:mm:ss" format. I prefer just the "yyyy-MM-dd" format.

What do I need to change in LineChartOptions to present it in a custom format?

    private struct ChartData
    {
        public DateTime X { get; set; }
        public int Y { get; set; }
    }

   LineChartOptions lineChartOptions = new()
       {
           // Parsing = new ChartParsing
           // {
           //     XAxisKey = "accessdate",
           //     YAxisKey = "total",
           // },
           ShowLines = true,
           Scales = new ChartScales
           {
               X = new ChartAxis
               {
                   Title = new()
                   {
                       Display = true,
                       Text = "Date"
                   },
                   Time = new ChartAxisTime
                   {
                       Parser="yyyy-MM-dd"
                   }
               },
               Y = new()
               {
                   Title = new()
                   {
                       Display = true,
                       Text = "Hits"
                   },
               },
           },
       };

[stsrki]

I've played a little with the settings and it seems that this should work.

LineChartOptions lineChartOptions = new()
{
    AspectRatio = 1.5,
    Scales = new ChartScales
    {
        X = new ChartAxis
        {
            Type = "time",
            Display = true,
            Title = new()
            {
                Display = true,
                Text = "Date",
            },
            Time = new ChartAxisTime
            {
                Unit = "day",
                DisplayFormat = new()
                {
                    Day = "DD T",
                }
            }
        },
        Y = new()
        {
            Title = new()
            {
                Display = true,
                Text = "Hits"
            },
        },
    },
};

The date format should math the chartjs formats, not the .NET. So you might need to play a bit until it works for your use cases.

[GaryWayneSmith]

I tried using your code and I'm receiving the following error. It looks like I was missing a chartjs adapter support script.

Also, the pointer on the format helped a lot. I don't recall seeing a reference to that in the docs, or if there was it didn't stand out.

[2024-06-12T15:08:52.112Z] Error: Microsoft.JSInterop.JSException: This method is not implemented: Check that a complete date adapter is provided.
gn@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:104124
formats@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:104640
init@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:185923
buildOrUpdateScales/<@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:93752
Q@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:8026
buildOrUpdateScales@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:93477
_updateScales@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:96221
update@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:95384
dn@https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js:13:91945
createChart@https://localhost:7285/_content/Blazorise.Charts/charts.js?v=1.5.2.0:126:19
initialize@https://localhost:7285/_content/Blazorise.Charts/charts.js?v=1.5.2.0:72:34
beginInvokeJSFromDotNet/i<@https://localhost:7285/_framework/blazor.web.js:1:3244
beginInvokeJSFromDotNet@https://localhost:7285/_framework/blazor.web.js:1:3201
_invokeClientMethod@https://localhost:7285/_framework/blazor.web.js:1:62841
_processIncomingData@https://localhost:7285/_framework/blazor.web.js:1:60316
gn/this.connection.onreceive@https://localhost:7285/_framework/blazor.web.js:1:53957
connect/</i.onmessage@https://localhost:7285/_framework/blazor.web.js:1:82102


   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)

   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)

   at Blazorise.Charts.JSChartModule.Initialize[TItem,TOptions](DotNetObjectReference`1 dotNetObjectReference, Object eventOptions, ElementReference canvasRef, String canvasId, ChartType type, ChartData`1 data, TOptions options, String dataJsonString, String optionsJsonString, Object optionsObject, IReadOnlyList`1 pluginNames)

   at Blazorise.Charts.BaseChart`4.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) blazor.web.js:1:40572
    log https://localhost:7285/_framework/blazor.web.js:1
    unhandledError https://localhost:7285/_framework/blazor.web.js:1
    startConnection https://localhost:7285/_framework/blazor.web.js:1
    _invokeClientMethod https://localhost:7285/_framework/blazor.web.js:1
    _processIncomingData https://localhost:7285/_framework/blazor.web.js:1
    onreceive https://localhost:7285/_framework/blazor.web.js:1
    onmessage https://localhost:7285/_framework/blazor.web.js:1

I had to manually add these

    <script src="https://cdn.jsdelivr.net/npm/moment"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

or

    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

Did I miss a step somewhere?

[stsrki]

Hello,

These are the scripts that we use

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

---

Regarding the date formats. I agree; we should mention them in the documents to prevent future confusion. Also, it would be good if we could add mappings for .NET date formats. Similar to what we have on the DatePicker component. But that would probably be a breaking change and not an easy task.