0.4.0 Unable to Get Working

[uday-thakur]

Hi Team,

I am using vanilla .NET MVC website (have razor cshtml view file) where I have got both chart.js and chartjs-plugin-colorschemes installed (installed via LibMan client side library). Having followed instructions, I am receiving the following message on console (F12 dev tools in browser):

Uncaught TypeError: Cannot read properties of undefined (reading 'plugins') in both .min.js and .js versions.

Inspecting the main JS file the error is here:

Chart.defaults.global.plugins.colorschemes = {
	scheme: 'brewer.Paired12',
	fillAlpha: 0.5,
	reverse: false,
	override: false
};

Additionally, I tried the NPM runkit option: https://npm.runkit.com/chartjs-plugin-colorschemes and it returns the same error.

My Razor Page:

<div class="row">
        <div class="col-lg-4">
            <canvas id="myChart"></canvas>
        </div>
    </div>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [4, 6, 3, 5, 2, 3],               
                borderWidth: 1
            }]
        },
        options: {
            plugins: {
                colorschemes: {
                    scheme: 'brewer.GnBu6'
                }
            }
        }
    });
</script>

My Master / Layout page:

<script src="~/Content/js/ChartJS3.7.1/chart.min.js"></script>
<script src="~/Content/js/ChartJsColorSchemes0.4.0/chartjs-plugin-colorschemes.js"></script>

My Index View: The bar chart renders but without any colours scheme applied.

Perhaps I am not doing something right? Apologies if that is the case.

[uday-thakur]

I do realise based on the comments by @berthin on #28 where he states: v:0.4.0 does not seem to work with Chart.JS v3.x.x, I am clearly using 3.7.1.

Is this correct team? It would be shame to use older version of Chart JS to use this wonderful plugin capability.

Also @yurij7070 and few others seem to suggest possible temp fixes, although I have not done this myself.

I will let someone from your side confirm.

[Elbyon]

Same problem up !

[brodrigz]

Same here, also on .NET MVC, up!

[brodrigz]

zsu's fork has addressed this issue, he already made a PR but it seems this repo is no longer maintained?

for anyone wanting to use this plugin I recommend cloning and building zsu'sfork

just tested it myself, works perfectly

[ecamlioglu]

zsu's fork has addressed this issue, he already made a PR but it seems this repo is no longer maintained?

for anyone wanting to use this plugin I recommend cloning and building zsu'sfork

just tested it myself, works perfectly

How you did? Can you share your chart importing variables?

[brodrigz]

zsu's fork has addressed this issue, he already made a PR but it seems this repo is no longer maintained? for anyone wanting to use this plugin I recommend cloning and building zsu'sfork just tested it myself, works perfectly

How you did? Can you share your chart importing variables?

Not doing anything different in particular

function createPieChartCfg(chartObj) {
        return {
            type: 'pie',
            data: {
                labels: chartObj.labelAxis,
                datasets: [
                    {
                        label: 'Dataset 1',
                        data: chartObj.valueAxis,
                        borderColor: '#323c50'
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    labels: percentageObj,
                    colorschemes: {
                        scheme: 'tableau.Tableau10'

                    },
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: chartObj.name
                    }
                }
            },
        };
    }

[rsoaresmga]

Hi, Solved? I think found solution

[jayantbh]

https://www.npmjs.com/package/hw-chartjs-plugin-colorschemes

This seems to be a fork published to work with chartjs v3.

[ivangomes]

Is this repository active?