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'))
}
}
}
`