Having trouble getting this working

[riptusk331]

First I just want to say that this is a fantastic idea and I'm really happy you developed the package. Pretty crazy that something like this isn't included by default in chartJS. I am unfortunately having some trouble getting it working within my application though.

I am loading your package via jsdelivr CDN, and using it along with chartJS within a basic jQuery document ready function. I am not a JS expert so I guess I could be setting something up wrong here, but it's not apparent to me what it is. My code seems to match your examples, at least for setting up the config parameter.

Here is what my chart currently looks like:

Here is my loading of your package & chart js in my base html file:

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"
    ></script>

And here is my .js file containing the chartJS and your package code. Note that this file is called at the very end of the body of my base HTML file.

$(function() {
  /// code goes here that sets up data variables below (cacc, rsvc, models)
  /// not posted to keep post short

  let ctx = document.getElementById("stacked_chartjs");
  let chart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August"
      ],
      datasets: [
        {
          label: "Corporate Access",
          data: cacc
        },
        {
          label: "Research Services",
          data: rsvc
        },
        {
          label: "Models & Content",
          data: models
        }
      ]
    },
    options: {
      plugins: {
        colorschemes: {
          scheme: "brewer.Paired12"
        }
      },
      maintainAspectRatio: true,
      responsive: true,
      tooltips: {
        mode: "index",
        intersect: false
      },
      hover: {
        mode: "index"
      },
      scales: {
        xAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: "Month"
            }
          }
        ],
        yAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: "Consumpion"
            }
          }
        ]
      }
    }
  });
});

[riptusk331]

The only other thing I thought could possibly be interfering is that I am using a custom Bootstrap theme, which has its own .JS file that contains chartJS (among other things), but I confirmed that it's using chartJS version 2.8.

[riptusk331]

It turns out that your plugin was indeed not working because of the .JS file from the custom bootstrap theme I mentioned. I have not dug into what specifically caused it yet, but the plugin started functioning once I commented out the reference to that file.

Going to close this, but I will report back my findings and post them here for anyone who runs into a similar issue.