PluginDynamic question

[AlphaComposite]

I'm trying to implement the chartjs-plugin-colorschemes plugin from here: https://nagix.github.io/chartjs-plugin-colorschemes/

Their plugin code example is:

options: {

plugins: {

  colorschemes: {

    scheme: 'brewer.Paired12'

  }

}

}

If there was a plugin sample using PluginDynamic I probably could've figure it out, but no such luck so far.

What would this line look like to implement this plugin: chart.Options.PluginDynamic = new Dictionary<string, object> ...???

[mattosaurus]

Hi, yep, I should probably update the readme with a plugin example. The code you need is something like this, where ColorScheme is your custom class that specifies the object properties..

`options.PluginDynamic = new Dictionary<string, object>();

ColorScheme colorScheme = new ColorScheme() { Scheme = "brewer.Paired12" };

options.PluginDynamic.Add("colorschemes", colorScheme);`

Though it's possible you'll need to use a Dictionary instead of a ColourScheme object if the plugin properties are just key/value pairs.

[AlphaComposite]

colorscheme is just the name of the plugin. There's no custom class. I'm just trying to implement the plugin.

The virtual tree hierarchy looks like this:

options: {

plugins: {

colorschemes: {

scheme: 'brewer.Paired12'

}

} }

[AlphaComposite]

Where would the word "plugins" be written to this tree hierarchy? I don't see it anything that I've generated. Doesn't this have to be specified somewhere?

[mattosaurus]

Ah, sorry, plugins is the key value in the dictionary, this determines the name of the property.

This will work for you.

options.PluginDynamic = new Dictionary<string, object>();
options.PluginDynamic.Add("plugins", new { scheme = "brewer.Paired12" });

[AlphaComposite]

Where would the plugin name be input?

Plugins is required per ChartJS - I've got that part. Then there's the plugin name, in this case it's colorschemes. Then there's the plugin's parameters - in this case it's scheme (with a set value of 'brewer.Paired12').

[mattosaurus]

Serialization of the PluginDynamic adds an arbitrary object to the options class, each value of the dictionary is added as an object with the key name.

So in the above code we're adding a key/value pair to the dictionary with a key value of "plugins" and a value object that gets serialized to the plugins property. The plugin name is input as the dictionary key.

[AlphaComposite]

The colorscheme isn't being applied. I guess I don't understand where colorscheme is understood by chartsjs.

I'm using your example: options.PluginDynamic = new Dictionary<string, object>(); options.PluginDynamic.Add("plugins", new { scheme = "brewer.Paired12" });

Here's what's being generated: "options":{"plugins":{"scheme":"brewer.Paired12"}}

[mattosaurus]

It feels like it's generating the right code then.

I assume you're also referencing the colourschemes file after the chart.js file?

<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>

Is the page giving any errors or is it just ignoring it?

[mattosaurus]

Oh wait, you're missing the colorschemes object in the code, something like this might work.

options.PluginDynamic = new Dictionary<string, object>();
options.PluginDynamic.Add("plugins", new { colorschemes = new { scheme = "brewer.Paired12" } });

[AlphaComposite]

Yes! That's the fix.

Thanks. It's great to have a nice series of ChartJS charts with automatic color schemes, because the charts are dynamic. You never know how many chart elements there will be, so preparing the colors for the charts manually without ever knowing how many chart elements there will be is a bit problematic.

Even though the Colorschemes plugin is so easy to implement, there's another very interesting approach to automatic colors here: https://codenebula.io/javascript/frontend/dataviz/2019/04/18/automatically-generate-chart-colors-with-chart-js-d3s-color-scales/

[mattosaurus]

Glad it's working for you now :)

Those plugins look pretty useful, I was planning to try and implement something similar when I first put this library together but didn't get round to it so I'm happy someone has managed to.