Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.25k stars 526 forks source link

Chart Options Issue? #37

Closed DaleCam closed 5 years ago

DaleCam commented 5 years ago

Hi There! Sorry to be a pain, Im trying to instantiate a similar chart to below in chartjs using your charts package: https://codepen.io/Shywim/pen/xXYror So i have the following code:

        protected LineChartOptions chartOptions = new LineChartOptions()
        {
            Tooltips = new Tooltips() {Enabled = false},
            Legend = new Legend(){Display = false},
            Scales = new Scales()
            {
                YAxes = new List<Axe>()
                {
                    new Axe(){Display = false}
                },
                XAxes = new List<Axe>()
                {
                    new Axe(){Display = false}
                }
            },
        };

If i remove the Scales object - the chart renders with my data correctly. However the chart doesnt render at all with any of the Scale objects. The other issue is that we are missing the elements object as far as i can see anyway? Other than that its working great - thank you! (FYI this is in v 0.5.1)

stsrki commented 5 years ago

I believe the problem is with Ticks property in the axes. The thing is that Blazor have it's own serializer and it is not very good. In this case it will serialize axe as

{
    display: false,
    ticks: null
}

Now ticks: null is the problem because chartjs will try to read that because it is specified. It doesn't matter if it's null, it will still try to read it. It's really stupid behavior :/

I cannot do much in the 0.5.x version because that version is still using Blazor 0.7 Blazorise 0.6 is converted to Blazor 0.8 and it has better compatibility with newtonsoft json so maybe I could use that to omit nullable objects from serializing.

stsrki commented 5 years ago

As I feared, the built-in serializer is still in use #7346. I can do as Steve has recommended but it just feels dirty. I think that adding third party libraries to Blazorise is not the path I want to go.

@DaleCam What do you think?

DaleCam commented 5 years ago

Hi @stsrki thansks for your consideration with this! How about an option then where we can pass you a string (json object) of the options instead of a ChartOption class? That would be ultimately flexible for users, and you then wouldnt need to keep a ChartOptions object up to date. However if users did want to keep using chart options, they could deserialise that to a json string as a user and pass that to your lib as a stringified json object. What do you think?

stsrki commented 5 years ago

It's not a bad idea and it's pretty easy to implement. But it will definitely be a temporary feature, at least until there is a better serializer implemented in Blazor.

I can add two parameters for charts(data and options), and mark them as Obsolete so that user can know that it will be removed sometime in the future.

Possible names for parameters:

stsrki commented 5 years ago

PS. can you tell what version of Blazorise are you using. 0.5,x(for Blazor 0.7) or 0.6(for Blazor 0.8 preview)?

DaleCam commented 5 years ago

PS. can you tell what version of Blazorise are you using. 0.5,x(for Blazor 0.7) or 0.6(for Blazor 0.8 preview)?

0.5.x until i have time to upgrade which may be a while! Thanks so much!

stsrki commented 5 years ago

I have added the feature in both version(0.5x and 0.6 preview). Please try it and let me know how it goes.

DaleCam commented 5 years ago

Hi @stsrki, Its working well! Thank you!

DaleCam commented 5 years ago

@stsrki Actually is there anyway to turn Gridlines off currently? No biggie, its just a nicety for me:) https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration Actually I can use the new string Options for that too!

stsrki commented 5 years ago

Yes just use string options for now, I will try to add styling options to the new version. But keep in mind that all new features will be in the v0.6.