gradient not working

[lerinoi]

Hello, I'm trying to use this plugin in my project and nothing is painted except for the legend

component code:

<template>
  <div class="index__dynamics">
    <div class="index__dynamics__wrapper">

      <div class="index__dynamics__title">
        <div class="index__dynamics__title__name">
          <img src="~assets/icon_dynamic.svg" alt="">
          Динамика общей оценки
        </div>
      </div>

      <div id="canvas-holder">
        <canvas id="chart-area" width="632" height="400"></canvas>
      </div>

      <div @click="qwe">click</div>

    </div>
  </div>
</template>

<script>
import gradient from 'chartjs-plugin-gradient';
import {
  Chart,
  ArcElement,
  LineElement,
  BarElement,
  PointElement,
  BarController,
  BubbleController,
  DoughnutController,
  LineController,
  PieController,
  PolarAreaController,
  RadarController,
  ScatterController,
  CategoryScale,
  LinearScale,
  LogarithmicScale,
  RadialLinearScale,
  TimeScale,
  TimeSeriesScale,
  Decimation,
  Filler,
  Legend,
  Title,
  Tooltip
} from 'chart.js';

Chart.register(
    ArcElement,
    LineElement,
    BarElement,
    PointElement,
    BarController,
    BubbleController,
    DoughnutController,
    LineController,
    PieController,
    PolarAreaController,
    RadarController,
    ScatterController,
    CategoryScale,
    LinearScale,
    LogarithmicScale,
    RadialLinearScale,
    TimeScale,
    TimeSeriesScale,
    Decimation,
    Filler,
    Legend,
    Title,
    Tooltip,
    gradient
);

export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    qwe() {
      const ctx = document.getElementById('chart-area').getContext('2d');
      const gen = () => [...Array(10)].map((v, i) => ({x: i, y: rand()}));
      const rand = () => Math.random() * 100;

      window.chart = new Chart(ctx, {
        type: 'line',
        data: {
          datasets: [{
            label: 'gradient fill',
            data: gen(),
            gradient: {
              backgroundColor: {
                axis: 'y',
                colors: {
                  0: 'red',
                  50: 'yellow',
                  100: 'green'
                }
              }
            }
          }]
        },
        options: {
          scales: {
            x: {
              type: 'linear'
            }
          }
        },
        plugins: [
          gradient
        ]
      });

    }
  },
  components: {
  },
  props: {}
}
</script>

`
nuxt.config

`
import path from 'path'
import fs from 'fs'

export default {
    target: 'static',
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'coj',
        htmlAttrs: {
            lang: 'ru'
        },
        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
            {hid: 'description', name: 'description', content: ''},
            {name: 'format-detection', content: 'telephone=no'}
        ],
        link: [
            {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
            {
                rel: "stylesheet",
                href: "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
            },
            {
                rel: "preconnect",
                href: "https://fonts.googleapis.com"
            },
            {
                rel: "preconnect",
                href: "https://fonts.gstatic.com",
                crossorigin: ''
            }
        ]
    },

    vue: {
        config: {
            productionTip: false,
            devtools: true
        }
    },

    env: {
        stripeEnv: process.env.stripeEnv,
        stripePublicKey: process.env.stripePublicKey,
    },

    loading: { color: '#fff' },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [
        "~layouts/global.css",
    ],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
        '@nuxtjs/vuetify'
    ],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
        // https://go.nuxtjs.dev/bootstrap
        'bootstrap-vue/nuxt',
        '@nuxtjs/auth-next',
        '@nuxtjs/axios'
    ],
    axios: {
      debug: true
    },
    auth: {
        cookie: {
            prefix: 'auth.',
            options: {
                secure: 'production'
            }
        },
        strategies: {

        },
        redirect: {
            home: false,
            callback: false,
            logout: false
        }
    },
    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {},
    server: {
        port: 35635, // default: 3000
        host: '0.0.0.0', // default: localhost,
        timing: false,
        https: {
            key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
            cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
        }
    }
}

`

[kurkle]

The plugin is applied twice in you code, once in Chart.register and then again in plugins. You only need one of these. Can't spot anything else from you paste, did you get anything on console? Can you create a reproduction?

[lerinoi]

The plugin is applied twice in you code, once in Chart.register and then again in plugins. You only need one of these. Can't spot anything else from you paste, did you get anything on console? Can you create a reproduction?

I'm sorry, my mistake, I removed one call, but nothing has changed, the graph itself is built, the legend and the points themselves are painted over, but not the graph, there are no errors in the console

[lerinoi]

[lerinoi]

Sorry, forgot to specify "fill: true"