Improved samples

[Joelius300]

With #153, I have laid out the foundation for this issue. Instead of the three (redundant) sample projects, we now have a dual-mode blazor application that looks and feels similar to the official Chart.js samples.

Now we need your help!

If you want to contribute to this library and/or get to know ChartJs.Blazor, you can port one of the samples listed below and submit a Pull Request. Please write a short comment on this issue before getting to work on the PR in order to avoid conflicts with other contributors.

If you decide to port a sample, please keep the following points in mind:

• Carefully look at the source of the original sample. You can do so on the 2.9 Branch of Chart.js.
• Check out the already ported samples and try to match the style and feel of them. You should also use the same folder/path structure. In many cases, it's a viable strategy to copy one of the existing samples and adjust it.
• Watch out for Copy-Paste errors. The samples are similar and the redundancy is okay since they should be more or less standalone but when you clone a sample and adjust it, make sure to not miss anything.
• Test your sample in both the Client- and the Server-Mode. It should look and feel almost like the original on the official Chart.js samples.
• When submitting the PR, please include the relevant information like links to the original sample, the js-source and maybe to your comment on this issue :)

If you hit any roadblocks along the way (e.g. you simply cannot port a sample because we don't support that feature yet), this issue is the place to discuss it. I highly recommend to start with the easier samples that don't contain any of the known hurdles like callbacks.

Below you can find a list of samples we want to port. I will tick them off once they're merged.

We appreciate your contributions!

Important

Bar charts

• Vertical
• Horizontal
• Stacked

Line charts

• Basic
• Stepped
• Interpolation
• Line styles
• Point styles
• Point sizes

Area charts

• Boundaries (line)
• Datasets (line)
• Stacked (line)
• Radar

Other charts

• Scatter
• Doughnut
• Pie
• Polar area
• Radar
• Combo bar/line

Linear scale

• Step size
• Min & max
• Min & max (suggested)

Logarithmic scale

• Line
• Scatter

Time scale

• Line
• Line (point data)
• Time Series
• Combo

Scale options

• Grid lines display
• Grid lines style
• Non numeric Y Axis

Legend

• Positioning
• Point style
• Callbacks

Tooltip

• Positioning
• Interactions
• Callbacks
• Border

Additional

Bar charts

• Multi axis
• Stacked groups

Line charts

• Multi axis

Other charts

• Scatter - Multi axis

Scale options

• Multiline labels
• Filtering Labels
• Toggle Scale Type

Tooltip

• HTML tooltips (line)
• HTML tooltips (pie)
• HTML tooltips (points)

Scriptable

• Bar Chart
• Bubble Chart
• Pie Chart
• Line Chart
• Polar Area Chart
• Radar Chart

Advanced

• Progress bar
• Content Security Policy

Before edit

Currently our library has three sample projects. That's too much.
Our samples also don't show nearly all features Chart.js resp. our library has.
Nor are they analogous to the official Chart.js samples which understandably generates confusion.

Solution

Client- / Server-side

Currently we have lots of redundancies because of our three projects. We should eliminate two of them and run them in dual mode. There's already an amazing resource for running blazor in dual mode which we can take as reference. Once this is done, we can also update https://www.iheartblazor.com with these samples so you can swich between client and server without having to build the samples yourself.

Porting samples

We should try to mirror the offical samples in order to show our consumers how to achieve the same thing. This has the many benefits like more clarity for the simple user when trying to achieve something and a reference for the people who already know Chart.js. It's also simpler for us to maintain and to give support.
Of course some additional samples might be needed e.g. for the callback stuff, especially when you consider the server-side incompatibility.

Format checklists

var x = ... from https://github.com/chartjs/Chart.js/blob/2.9/samples/samples.js
var l = '';
x.forEach(y => { l+='\n### ' + y.title + '\n'; y.items.forEach(z => l+='[' + z.title + '](https://www.chartjs.org/samples/latest/' + z.path + ')\n')});

[mariusmuntean]

I agree with improving the samples; that should make it much easier to understand how to achieve a certain result with ChartJs.Blazor.

[Joelius300]

@mariusmuntean What do you think of my priority grouping (important / additional)?