Enabling Plugins - Waterfall Plugin

[bh8ur8js]

Plugin

The plugin appears to be loaded ,in as much there are no errors in either Rails or Java console.

The following code in the Controller is seems correct as per the documentation..

    @data_waterfall = {
      
      datasets: [
        {
          label: 'Expenses',
          data: [50],
          background_color: '#e8cdd7',
          stack: 'stack 1',
        },
        {
          data: [50], 
          waterfall: {
            dummyStack: true,
          },
          background_color: "rbga(0,0,0,0)",
          stack: 'stack 2'
        },
        {
          label: "Head Count",
          data: [50],
          stack: 'stack 2',
          background_color: '#a53860'
        },
        {
          label: 'New Expenses',
          data: [100],
          background_color: '#a53860',
          stack: 'stack 3'
        }
      ]
    }

    @options_waterfall = {
      plugins: {
        waterFallPlugin: {
          stepLines: {
            enabled: true,
            startColorStop: 0,
            endColorStop: 0.6,
            startColor: 'rgba(0, 0, 0, 0.55)',
            endColor: 'rgba(0, 0, 0, 0)',
            diagonalStepLines: true
          }
        }
      }
    }

Also in the view we have

<%= bar_chart @data_waterfall, @options_waterfall %>

The dummy stack is visible, so I think that the plugin is being ignored. i am not sure why.

I have installed npm and have it loading all the JS. I gives no errors. The package-lock.json shows

{
  "name": "fintyre",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "chart.js": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
      "requires": {
        "chartjs-color": "^2.1.0",
        "moment": "^2.10.2"
      }
    },
    "chartjs-color": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
      "requires": {
        "chartjs-color-string": "^0.6.0",
        "color-convert": "^0.5.3"
      }
    },
    "chartjs-color-string": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
      "requires": {
        "color-name": "^1.0.0"
      }
    },
    "chartjs-plugin-custom-lines": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-custom-lines/-/chartjs-plugin-custom-lines-0.0.5.tgz",
      "integrity": "sha1-U3XilzceuNhUgQ46i8mYlirp77Q=",
      "requires": {
        "lodash.merge": "^4.6.0"
      }
    },
    "chartjs-plugin-waterfall": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-waterfall/-/chartjs-plugin-waterfall-1.0.3.tgz",
      "integrity": "sha1-wcntwyyX913U4qYwdQoKlZM3B0o=",
      "requires": {
        "lodash.groupby": "^4.6.0",
        "lodash.merge": "^4.6.0"
      }
    },
    "color-convert": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
      "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
    },
    "color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "lodash.groupby": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
      "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E="
    },
    "lodash.merge": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
      "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ=="
    },
    "moment": {
      "version": "2.24.0",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
    }
  }
}

and I have

config.assets.paths << Rails.root.join('node_modules')` in config/application.rb

My suspicion is that i am missing something in loading the JS.

Any help would be greatly appreciated.