Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hi,

Thank you for your library! It works very nice when running locally, but I'm having problems when running from an Azure App, below the console logs from the browser:

`GET https://myapp.azurewebsites.net/_content/PSC.Blazor.Components.Chartjs/Chart.js net::ERR_ABORTED 404

GET https://myapp.azurewebsites.net/_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js net::ERR_ABORTED 404

blazor.server.js:1 [2022-07-11T08:48:34.681Z] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'. `

Any idea about what's happening?

Thanks in advance

While I haven't been able to compare the feature-set between this and the no-longer-maintained mariusmuntean/ChartJs.Blazor, I'm excited about there being an actively maintained ChartJs Blazor implementation.

Would you like to contact that community (via their Issues) and let them know of your package? Or another option is to pull-in features from that or fork that.

There's certainly interest:
mariusmuntean/ChartJs.Blazor#199
mariusmuntean/ChartJs.Blazor#191
mariusmuntean/ChartJs.Blazor#160
mariusmuntean/ChartJs.Blazor#179

Thanks for considering!

Hello Enrico,

I re-create the charts on demand and I have some memory leaks because some references must be disposed (I am not an expert on this issue).

1.- moduleTask in ChartjsInterop:

  public async ValueTask DisposeAsync()
  {
      if (moduleTask.IsValueCreated)
      {
          await (await moduleTask.Value).DisposeAsync();
      }
  }

2.- JsModule and dotNetObjectRef in Chart.razor. :

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    try
    {
        ...
        dotNetObjectRef?.Dispose();
        dotNetObjectRef = DotNetObjectReference.Create(Config);

        JSModule ??= new ChartJsInterop(JSRuntime);
        ....
    }
    catch (ObjectDisposedException)
    {
        // Sometimes the object reference is released but JS invoke some event.
    }
}

public async ValueTask DisposeAsync()
{
    dotNetObjectRef?.Dispose();
    dotNetObjectRef = null;

    if (JSModule is not null)
    {
         await JSModule.DisposeAsync();
        JSModule = null;
    }
}

Let me know what do you think :)
Thank you,
Gaston

In Chart.razor you are spamming the console when you hover a chart.
I guess it is some test code that is left behind.

Hello there, the tooltip feature of the charts is amazing as it is, however it isn't flexible enough I think. I will like to request the options to being able to pass the BackgroundColor, Position and TitleColor

Something like this

Tooltip = new Tooltip()
{
    Callbacks = new Callbacks()
    {
        Label = (ctx) =>
        {
            return new[] { 
                $"DataIndex: {ctx.DataIndex}\nDatasetIndex: {ctx.DatasetIndex}" };
        },
        Title = (ctx) =>
        {
            return new[] { $"This is the value {ctx.Value}" };
        },
       BackgroundColor = new() { "#ffffff" }
    }
}

I just noticed it -- there is no license given. So what is it? :-) It would be great to see OSI compliant one.

Please note that once you add open source license GitHub Copilot will start harvesting the code violating the license. This is why I started migration of my projects (for now I am evaluating CodeBerg and so far so good).

Describe the bug
When i declare a Callback for Ticks, i receive a critical error when loading component.

To Reproduce
Steps to reproduce the behavior:

1. Create a demo project
2. Follow instructions for add this package on README
3. Create a empty page amd add a new Bar Chart
4. On Scales.YAxisId configuration, set a empty CallBack returning a empty array

Expected behavior
A bar chart with no labels on ticks (on left)

Screenshots

Desktop:

• OS: Windows 11
• Browser: Microsoft Edge
• Version: Release

Hi,

Is there any way to change the color as per the requirement,
for example:
My Requirement is

1. I want the color to be green in the bar chart when the value is less than 1.25
2. I want the color to be orange in the bar chart when the value is 1.25 to 2.5
3. I want the color to be Red in the bar chart when the value is 2.5 to 3.75
4. I want the color to be black in the bar chart when the value is 3.75 to 5

Is this possible, If possible please let me know.

then I also want to Define the x-axis value in the bar chart, can I define it with my own values, Just started to use your chart work. If there is any example for this please link it here.

I'm a beginner, If anything I have asked is wrong, I'm sorry.

Hello,

I get this error on startup: Uncaught SyntaxError: export declarations may only appear at top level of a module Chart.js:46
Can you see it?

Thank you,
Gaston.

Hello there, I want to create a grouped/stacked Chart, similar to this one https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html when I emulate the configuration, I get the following result.

This is the configuration and the dataset I use
`_configBar5 = new BarChartConfig()
{
Options = new Options()
{
Interaction = new ()
{
Intersect = false
},
Plugins = new Plugins()
{
Title = new Title()
{
Display = true,
Text = "Population growth (millions)",
Font = new Font()
{
Size = 18
}
}
},
Scales = new Dictionary<string, Axis>()
{
{
Scales.XAxisId, new Axis()
{
//Stacked = true,
BeginAtZero = true,
}
},
{
Scales.YAxisId, new Axis()
{
Stacked = true,
BeginAtZero = true,
}
}
},
}
};

    _configBar5.Data.Labels.AddRange(Labels);

    List<decimal?> Grouped1 = new List<decimal?>() { 133, 221, 783, 2478 };
    List<decimal?> Grouped2 = new List<decimal?>() { 408, 547, 675, 734 };

    _configBar5.Data.Datasets.Add(new BarDataset()
        {
            Stack = new() {"One"},
            Type = "bar",
            Label = "Africa",
            Data = Grouped1,
            BackgroundColor = new List<string>() { "#3e95cd" }
        });

    _configBar5.Data.Datasets.Add(new BarDataset()
    {
        Stack = new() { "One" },
        Label = "India",
            Type = "bar",
            Data = Grouped2,
        BackgroundColor = new List<string>() { "#8e5eff" }
    });

    _configBar5.Data.Datasets.Add(new BarDataset()
        {
            Stack = new() { "Two" },
            Label = "Europe",
            Type = "bar",
            Data = Grouped1,
            BackgroundColor = new List<string>() { "#8e5ea2" }
        });`

Hey there, I'm Joel, co-author and ex-maintainer of ChartJs.Blazor.
First of all, thank you for maintaining this library and giving the users an alternative to our outdated one!

I was contacted in regard to a potential license violation, because it seems that this project is using code from ChartJs.Blazor without attribution of license and copyright. A very obvious case of that is ColorUtil, which is a 1:1 copy of ours (apart from the namespace).

I am glad our project was able to inspire you and that our code helped you kickstart the project, but I am disappointed that you don't ever mention it anywhere. Primarily, I would like to see it because we're all doing this in our free time and out of passion, so showing appreciation for the work of others that you are building on is in my opinion much needed to sustain a friendly open source community. Additionally, from a legal perspective, not attributing is in violation of the MIT license, which states:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

Could you please add appropriate attribution to your readme?

The correct attribution for your license file would be the following IIRC. For the readme I'm sure you can come up with something fitting.

Copyright (c) 2019 Marius Muntean
Copyright (c) 2021 Joel L.
Copyright (c) 2024 Enrico Rossini

Aside from this, I think it might be a good idea to point users of our library to yours. If you are interested, I can arrange that after the attribution issue is fixed.

Thanks in advance. If you have any questions let me know :)

Kind regards,
Joel

I am referring to this plugin, https://www.chartjs.org/chartjs-plugin-annotation

I would like to see it integrated so I can use it like I use chartcontrol for the winforms, to get the average line.

If there's another way to do this without this plugin I would be glad to hear.

Is your feature request related to a problem? Please describe.
When trying to configure a line chart to hide the points, I am limited to the properties in PSC.Blazor.Components.Chartjs.Models.Common.PointStyle. Trying to set PointStyle to false results in a compilation error.

Describe the solution you'd like
Either the ability to set PointStyle to false, or add PointStyle.None.

Describe alternatives you've considered
none

Additional context
https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles

Similar to the BarDataExamples, this object "Colors" is not found as well.

Hi, you recently posted an article on https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/ explaining how to use Chart.js in Blazor.

After much testing I've found that the anonymous Options object is not being mapped to the JS config object. No matter what properties I put in the Options object, the changes are not reflected at runtime.

Hi,

I am testing this component with line and bar graph.

At the moment i am missing the option to show the value on the graph it self.

I see it is supported by ChartJS (using plugin) is it somehow possible with this component ?

I would appreciate any pointers,

Thanks in advance.

Describe the bug
For line charts (and maybe others, I only tried this one), if setting width and height, the height parameter is ignored and is always "width / 2". This issue probably is related to #15

To Reproduce
Steps to reproduce the behavior:

• Go to LineSimple.Razor and set width and height, e. g.
  <Chart Config="_config1" @ref="_chart1" Width="500px" Height="400px"></Chart>
• Run the demo and navigate to the "Line Simple" demo
• Open the browsers developer tools
• Using the element picker, check the canvas element
• See width and height: height: 250px; width: 500p

Expected behavior

• height parameter is as defined, in this example 400px

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome, Edge
• Version: Chrome: 121.0.6167.86

Additional context
As far as I can see, the _resize method in chart.js (from line 6855) overrides the width and height:

  _resize(width, height) {
    const options = this.options;
    const canvas = this.canvas;
    const aspectRatio = options.maintainAspectRatio && this.aspectRatio;
    const newSize = this.platform.getMaximumSize(canvas, width, height, aspectRatio);
    const newRatio = options.devicePixelRatio || this.platform.getDevicePixelRatio();
    const mode = this.width ? 'resize' : 'attach';
    this.width = newSize.width;
    this.height = newSize.height;
    this._aspectRatio = this.aspectRatio;
    if (!retinaScale(this, newRatio, true)) {
      return;
    

If I change the lines setting the width to this, it works as expected:

    this.width = width;
    this.height = height;

So, "this.platform.getMaximumSize(canvas, width, height, aspectRatio);" returns a smaller maximum size than requested. Although I have an idea how this happens, I'm not sure what the best fix for this is. There probably is a reason why getMaximumSize returns a smaller size.

As a side note, I've noticed that the canvas element can be removed from Chart.razor:

<canvas id="@Config.CanvasId" style="@(Height != null ? $"height:{Height}" : "") @(Width != null ? $"width:{Width};" : "")"></canvas>

I can remove this line, and everything still works as usual. It seems the canvas is created later in javascript.

Describe the bug
When you have a line graph and a pie chart in the same page, and either of them has registerdatalabels set to true,
The result is that based on order of appearance, one chart will be partially rendered, and the other not rendered at all.

To Reproduce
In a blazor server project, create a PieChart Component...

<h3>Pie Simple</h3>

<Chart Config="_config2" Height="400px" />

private PieChartConfig? _config2;
private Chart? _chart2;

protected override Task OnInitializedAsync()
{
    _config2 = new PieChartConfig
    {
        Options = new PieOptions()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            RegisterDataLabels = true,
            Plugins = new Plugins()
            {
                DataLabels = new DataLabels()
                {
                    Align = DatalabelsAlign.Center,
                    Anchor = DatalabelsAnchor.Center,
                }
            }
        },
        Data =
        {
            Labels = PieDataExamples.SimplePieText
        }
    };

    _config2.Data.Datasets.Add(new PieDataset()
    {
        Label = "My First Dataset",
        Data = PieDataExamples.SimplePie.ToList(),
        BackgroundColor = SampleColors.PaletteBorder1,
        HoverOffset = 4,
        DataLabels = new DataLabels()
        {
            BackgroundColor = "black",
            BorderRadius = 4,
            Color = "white",
            Font = new Font()
            {
                Weight = "bold"
            },
            Padding = new Padding(6)
        }
    });
    return Task.CompletedTask;
}

and a LineGraph component...

<h3>LineGraph</h3>

<Chart Config="_config1" Height="400px" />

private LineChartConfig? _config1 = new();
private Chart? _chart1 = new();

protected override Task OnInitializedAsync()
{
    _config1 = new LineChartConfig
    {
        Options = new Options()
        {
            Responsive = true,
            MaintainAspectRatio = false,
            Plugins = new Plugins()
            {
                Zoom = new Zoom()
                {
                    Enabled = true,
                    Mode = "xy",
                    ZoomOptions = new ZoomOptions()
                    {
                        Wheel = new Wheel()
                        {
                            Enabled = true
                        },
                        Pinch = new Pinch()
                        {
                            Enabled = true
                        }
                    },
                    Pan = new Pan()
                    {
                        Enabled = true,
                        Mode = "x"
                    }
                }
            }
        },
        Data =
        {
            Labels = LineDataExamples.SimpleLineText
        }
    };

    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 1",
        Data = LineDataExamples.SimpleLine.ToList(),
        BorderColor = SampleColors.PaletteBorder1.FirstOrDefault()
    });

    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 2",
        Data = LineDataExamples.SimpleLine2.ToList(),
        BorderColor = SampleColors.PaletteBorder1.Skip(1).FirstOrDefault(),
    });
    _config1.Data.Datasets.Add(new LineDataset()
    {
        Label = "Line 3",
        Data = LineDataExamples.SimpleLine3.ToList(),
        BorderColor = SampleColors.PaletteBorder1.Skip(2).FirstOrDefault(),
    });

    return Task.CompletedTask;
}

Reference the components in the _Imports.razor and use them in the Home page...

@page "/"

<PageTitle>Dashboard</PageTitle>

<LineGraph />
<PieChart />

Once you run the application, you will see something like...

if you open dev tools and look at console, you can see...

if you comment out the RegisterDataLabels setting in the PieOptions inside of the PieChartConfig,
you can see both the line graph and the simple pie chart, but of course with no labels as below...

if you enable RegisterDataLabels and only use the simple pie component like below...

@page "/"

<PageTitle>Dashboard</PageTitle>

<PieChart />

The pie chart renders with no problems.

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Both charts render and the labels are visible where enabled.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome/Edge
• Version 127.0

Additional context
I have also noticed that when both charts are used, in here

_labels does not exists as a key

Hello :)

Is your feature request related to a problem? Please describe.
I need to know when a bar on the Bar Chart is clicked. I tried with OnChartClick and OnChartOver events but it does not write nothing to the console. Can you help me?

<Chart Config="_config1" @ref="_chart1" Class="mt-2 ml-2" Width="100px" 
    OnChartClick="(i) => OnChartClick(i)"
    OnChartOver="() => OnChartOver()"></Chart>

@code {
...

    private void OnChartOver()
    {
        Console.WriteLine("ChartOver");
    }

    private void OnChartClick(int i)
    {
        Console.WriteLine("ChartClick " + i);
    }
}

Describe the solution you'd like
I'd like the OnChartClick and OnChartOver work (with their parameters) .

https://www.chartjs.org/docs/2.8.0/general/interactions/events.html -->
onHover: Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).

OnClick: Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements.

Thank you.

Feature request for handling of large data series where x value is a DateTime. Requires moment.js.
Example: https://codepen.io/toxy1337/pen/rQRqrw

Is your feature request related to a problem? Please describe.
The JavaScript chart-js-plugin-zoom library has a 'resetZoom' function that can be called on the chart to reset it to the defaults that were used before any zooming or panning occurred. It would be really helpful if the same function existed in this library.

Describe the solution you'd like
Provide a function that can be called on the chart reference to reset the zoom.

Describe alternatives you've considered
I thought about setting limits to the x and y axes instead of adding a reset zoom button however it also seems like the limits functionality is not fully defined (the class is empty).

I cannot find the object BarDataExamples anywhere.

This library is licensed under the GPL, which requires that any project utilizing it must disclose all of its source code, thereby prohibiting its use in commercial projects that do not intend to release their source code publicly. is that the intention?

This plugin demonstrates the feature perfectly.
Integration of this plugin would be a killer feature. It would be appreciated by many users including me of course!
There are no alternative open-source solutions for this yet, as far as I'm concerned.

I have an issue with the bar color when the mouse is over a bar. This is the example and how the bars are displaying at the beginning.

When the mouse goes over a bar, the bar becomes black first

and then, after few seconds, the bar has the expected colour.

How can I fix it?

Thank you,
Henry

I have a simple Razor page

@page "/test"

<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>

@code {
    private BarChartConfig? _config1;
    private Chart? _chart1;

    protected override async Task OnInitializedAsync()
    {
        _config1 = new BarChartConfig()
            {
                Options = new Options()
                {
                    IndexAxis = "y",
                    Responsive = true,
                    MaintainAspectRatio = false,
                    Plugins = new Plugins()
                    {
                        Legend = new Legend()
                        {
                            Align = Align.Center,
                            Display = false,
                            Position = LegendPosition.Right
                        }
                    },
                    Scales = new Dictionary<string, Axis>()
                {
                    {
                        Scales.XAxisId, new Axis()
                        {
                            Stacked = true,
                            Ticks = new Ticks()
                            {
                                MaxRotation = 0,
                                MinRotation = 0
                            }
                        }
                    },
                    {
                        Scales.YAxisId, new Axis()
                        {
                            Stacked = true
                        }
                    }
                }
                }
            };

        _config1.Data.Labels = new List<string>() { "1900", "1950", "1999", "2050" };
        _config1.Data.Datasets.Add(new BarDataset()
            {
                Label = "Value",
                Data = new List<decimal>() { 408, 547, 675, 734 },
                BackgroundColor = ColorPalettes.MainPalette,
                BorderColor = ColorPalettes.MainPalette,
                BorderWidth = 1
            });
    }
}

The error I get is

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.

Hello :)

Can you implement the Title Callback?

Tooltip = new Tooltip()
{
    Callbacks = new Callbacks()
    {
        Title = (ctx) => XXXX,    <--- add this functionality
        Label = (ctx) => null
    }                   
}

Thank you in advance

Describe the bug
Does not work in .NET 6.0 Blazor Server.

To Reproduce
Can reproduce by creating a fresh .NET 6 Blazor Server project, importing latest nuget version, and copying over relevant files from Demo site. I have replicated in this repo here: https://github.com/riley-cochrane/ChartJSTest
Run site
Go to https://localhost:7245/testgraph
Hover over bar on bar graph and no tool tip displays.

Console displays error:
Uncaught Error: The current dispatcher does not support synchronous calls from JS to .NET. Use invokeMethodAsync instead. at y (blazor.server.js:1:1840) at e.invokeMethod (blazor.server.js:1:2834) at config.options.plugins.tooltip.callbacks.title (Chart.js:81:27) at Tooltip.getTitle (chart.js:11425:35) at Tooltip.update (chart.js:11510:25) at Tooltip.handleEvent (chart.js:11875:14) at Object.afterEvent (chart.js:11936:25) at callback (chart.js:53:15) at PluginService._notify (chart.js:6316:11) at PluginService.notify (chart.js:6303:25)

Any fix for this? Can make local changes to create a new version if necessary.

Thanks,
Riley

Hello, one last thing :)

Can you implement the StepSize?

Scales.YAxisId, new Axis()
{
    Display = false,
    Ticks = new()
    {
       stepSize <-- Add this functionality 
    }
}

The Chartjs' config javascript:

scales: {
    y: {
        ticks: {stepSize: 1}
    }
}

Thank you in advance

I'd like to create pie charts which have an arc of 180 degrees. Is it possible to set circumference and rotation options? For example, in pure JavaScript I would do this:

var chart = new Chart(canvas, {
  type: 'doughnut',
  data: ['400', '200'],
  options: {
    rotation: -90,
    circumference: 180,
}

When do you update the library to support NET7?

Is your feature request related to a problem? Please describe.
There is no ability to customise the appearance of a chart legend's labels, as there is no corresponding property in PSC.Blazor.Components.Chartjs.Models.Common.Legend.

Describe the solution you'd like
I would like the ability to customise a chart's legend labels, through the Legend plugin. (e.g. to display circles instead of boxes for datasets.) It is not possible to do this, as far as I can tell, with the current release.

Describe alternatives you've considered
none

Additional context
https://www.chartjs.org/docs/3.9.1/configuration/legend.html#legend-label-configuration

I have checked the line and labels chart, and I tried it but on the webpage, it shows a line with labels like 65, 59, 91, etc.
But when I tried with the code you have given in linesimplelabel.razor, It doesn't show any label.
I'm getting lines without labels like this:

Is the code you have given correct, does it show the lines with the label, or do have to do anything else to get the labels?

Please let me know @erossini

After #33 is implemented using chartjs-plugin-datalabels plugin it seems i am now missing an option to format the data label.

It seems to be supported by the plugin itself : https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html#multiline-labels

I can workaround this need currently by truncating the data itself , but not it is not always to workaround this way, so it should be possible with this package someday.

Thanks in advance.

Hey
I just stumbled upon your project and tried it out in my Blazor Webassembly Project.
Works pretty well on first load until the point, when I fetched new Data from an Api and tried to refresh the Chart.

Maybe I am just missing something or this is not implemented yet.
I tried removing and adding a new Config with the new Data, but nothing happens.

In the main ChartJS Project you can just call chart.update(); but did not found something similar here.

Is there a simple solution to refresh the Chart through your Wrapper Library?

Best regards
Michael

These versions contain the following code not present in the source code repository in wwwroot/Chart.js:

    chart.options.animation.onComplete = function (ctx) {
        window["AnimationComplete1"](ctx);
        DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'AnimationCompleted');
    }

    chart.options.scales.x.ticks.callback = function (val, index) {
        window["TickEvent1"](val, index);
        DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'ChartScaleXTicks', val, index);
    }

As there are no functions on the window object named AnimationComplete1 and TickEvent1, these cause Javascript errors resulting in no re-rendering taking place. In practice, this means as soon as the window is shrunk to a size that requires a re-render, the chart disappears.

6.0.9 works in this regard, since it does not have these lines of code