kurkle/chartjs-plugin-gradient

Easy gradients for Chart.js

chartjs-plugin-gradient

Easy gradients for Chart.js

This plugin requires Chart.js 3.0.0 or later. It should also work with v2, but there are no regressing tests to guarantee this.

NOTE the plugin does not automatically register.

Example

Installation

NPM:

npm i --save-dev chartjs-plugin-gradient

CDN:

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient"></script>

Usage

loading

ESM

import gradient from 'chartjs-plugin-gradient';

CDN

const gradient = window['chartjs-plugin-gradient'];

Registering

All charts

Chart.register(gradient);

Signle chart

const chart = new Chart(ctx, {
  // ...
  plugins: {
    gradient
  }
});

Configuration

The gradient colors are configured in the gradient key of dataset

const chart = new Chart(ctx, {
  data: {
    datasets: [{
      // data
      gradient: {
        backgroundColor: {
          axis: 'y',
          colors: {
            0: 'red',
            50: 'yellow',
            100: 'green'
          }
        },
        borderColor: {
          axis: 'x',
          colors: {
            0: 'black',
            1: 'white',
            2: 'black',
            3: 'white'
          }
        }
      }
    }]
  }
});

License

chartjs-plugin-gradient.js is available under the MIT license.

chartjs-plugin-gradient's Issues

Issue with example

Hey guys! I was looking for exactly this and your project stood out to me.
However, when trying to use it with react-chartjs-2 the example doesn't seem to work.
Any known issues with that?

Why I am not able set the background to gradient even after following the steps

Render Graph Error on line : TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided double value is non-finite.

With the following configuration I get this error:
Used with the latest version chart.js (3.0.0-beta.5):

{
  "data": {
    "labels": [
      "2020-11-02 21:00:00",
      "2020-11-02 22:00:00",
      "2020-11-02 23:00:00",
      "2020-11-03 00:00:00",
      "2020-11-03 01:00:00",
      "2020-11-03 02:00:00",
      "2020-11-03 03:00:00",
      "2020-11-03 04:00:00",
      "2020-11-03 05:00:00",
      "2020-11-03 06:00:00",
      "2020-11-03 07:00:00",
      "2020-11-03 08:00:00"
    ],
    "datasets": [
      {
        "label": "Aussen",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 13.28,
        "maxval": 16.72,
        "current": "13.28",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_aussen",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(149,165,166,0.85)",
              "50": "rgba(211,84,0,0.85)",
              "100": "rgba(205,220,57,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(231,76,60,0.85)",
              "1": "rgba(241,196,15,0.85)",
              "2": "rgba(26,188,156,0.85)",
              "3": "rgba(230,126,34,0.85)"
            }
          }
        },
        "name": "Aussen",
        "last_changed": "2020-11-03T09:01:57.020294+00:00",
        "state": "13.28",
        "backgroundColor": "rgba(176,122,161,0.85)",
        "borderColor": "rgba(176,122,161,0.85)",
        "data": [
          "16.72",
          "16.28",
          "16.28",
          "15.22",
          "15.22",
          "14.61",
          "14.28",
          "13.89",
          "14.00",
          "14.11",
          "13.72",
          "13.39",
          "13.28"
        ]
      },
      {
        "label": "Küche",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 23.53,
        "maxval": 25.98,
        "current": "23.95",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_kuche",
        "name": "Küche",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(236,240,241,0.85)",
              "50": "rgba(243,156,18,0.85)",
              "100": "rgba(229,28,35,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(241,196,15,0.85)",
              "1": "rgba(26,188,156,0.85)",
              "2": "rgba(230,126,34,0.85)",
              "3": "rgba(39,174,96,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:31:06.981875+00:00",
        "state": "23.95",
        "backgroundColor": "rgba(157,118,96,0.85)",
        "borderColor": "rgba(157,118,96,0.85)",
        "data": [
          "25.98",
          "25.11",
          "24.44",
          "24.23",
          "24.11",
          "23.78",
          "23.74",
          "23.53",
          "23.56",
          "23.95",
          "23.88",
          "23.95"
        ]
      },
      {
        "label": "Bad",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 24.86,
        "maxval": 25.89,
        "current": "25.29",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_bad",
        "name": "Bad",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(46,204,113,0.85)",
              "50": "rgba(52,73,94,0.85)",
              "100": "rgba(39,174,96,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(26,188,156,0.85)",
              "1": "rgba(230,126,34,0.85)",
              "2": "rgba(39,174,96,0.85)",
              "3": "rgba(142,68,173,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:34:21.910288+00:00",
        "state": "25.29",
        "backgroundColor": "rgba(52,152,219,0.85)",
        "borderColor": "rgba(52,152,219,0.85)",
        "data": [
          "25.89",
          "25.83",
          "25.58",
          "25.42",
          "25.38",
          "25.03",
          "24.96",
          "24.86",
          "25.06",
          "25.17",
          "25.25",
          "25.29"
        ]
      },
      {
        "label": "Eingang",
        "borderWidth": 2,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "pointHoverRadius": 5,
        "fill": true,
        "unit": "°C",
        "minval": 21.89,
        "maxval": 22.12,
        "current": "21.89",
        "mode": "history",
        "entity": "sensor.temp_sensor_temperature_eingang",
        "name": "Eingang",
        "gradient": {
          "backgroundColor": {
            "axis": "y",
            "colors": {
              "0": "rgba(41,128,185,0.85)",
              "50": "rgba(44,62,80,0.85)",
              "100": "rgba(236,240,241,0.85)"
            }
          },
          "borderColor": {
            "axis": "x",
            "colors": {
              "0": "rgba(52,73,94,0.85)",
              "1": "rgba(127,140,141,0.85)",
              "2": "rgba(41,128,185,0.85)"
            }
          }
        },
        "last_changed": "2020-11-03T08:35:15.134018+00:00",
        "state": "21.89",
        "backgroundColor": "rgba(46,204,113,0.85)",
        "borderColor": "rgba(46,204,113,0.85)",
        "data": [
          "21.97",
          "21.99",
          "22.05",
          "22.03",
          "22.12",
          "22.05",
          "22.03",
          "21.97",
          "22.03",
          "22.03",
          "21.95",
          "21.89"
        ]
      }
    ]
  },
  "config": {
    "secondaryAxis": false,
    "series": 5,
    "options": {}
  }
}

If I adjust the processing of createGradient and addColors then it works:

function createGradient(ctx, axis, area) {
        // Bugfix, because sometimes i get no values...
	if(area.bottom && area.top && area.left && area.right){
	        return axis === 'y'
		? ctx.createLinearGradient(0, area.bottom, 0, area.top)
		: ctx.createLinearGradient(area.left, 0, area.right, 0);
	}
}

function addColors(gradient, scale, colors) {
	Object.keys(colors).forEach(value => {
		const pixel = scale.getPixelForValue(value);
		if(pixel){
                        // BugFix, only when pixel holds values....
			const stop = scale.getDecimalForPixel(pixel);
			gradient.addColorStop(Math.max(0, Math.min(1, stop)), index_esm(colors[value]).rgbString());
		}
	});
}

When the scale is configure in reverse mode, the color sequence is not correct

When you are configuring the scale with reverse: true, the color sequence of the gradient is not correct.

I have prepared a codepen for that: https://codepen.io/stockinail/pen/xxpENVM

I can check how to solve it and submit a PR for that.

Legend boxes don't reflect the gradient

Feature Proposal

As I have seen in my lib, when you use gradients, the gradients are not reflected in the legend.

To be precise, the gradient is applied to the legend but due to the gradient size is limited to the scales, the legend are out side of the gradient and then the canvas use the color related to the position.

See example in codepen: https://codepen.io/stockinail/pen/xxpENVM

As you can see the legend is using the red color because is the color from the gradient for legend position.

The same is for polarArea (using the radial gradient) where all legend items are colored with the color of the gradient.

The proposal is to reflect on the legend the gradient.

Possible Implementation

I see only 1 option, creating a generateLabels callback in the plugin to set to the chart in order to create a specific gradient (with dimension of the legend box).

For polarArea, the generateLabels callback could return the color at the data index, calculating the last color for the data index. For this, I have got already a code (even if is written in Java) that it can be translated and used.

Library panics when legend is disabled

I noticed that the library crashes with a legend disabled by the display property. My first workaround was to set the legend property to false but I think it would be nice to respect the property.

Configuration that causes the error

plugins: {
  legend: {
    display: false,
  },
}

The actual stacktrace

TypeError: Cannot read properties of undefined (reading 'top')
    at buildArea (chartjs-plugin-gradient.js?cb17:175:1)
    at applyGradientToLegendByDatasetIndex (chartjs-plugin-gradient.js?cb17:187:1)
    at updateLegendItems (chartjs-plugin-gradient.js?cb17:227:1)
    at Object.afterUpdate (chartjs-plugin-gradient.js?cb17:342:1)
    at callback (helpers.segment.js?a6be:92:1)
    at PluginService._notify (chart.esm.js?efac:4922:1)
    at PluginService.notify (chart.esm.js?efac:4909:1)
    at Chart.notifyPlugins (chart.esm.js?efac:6047:1)
    at Chart.update (chart.esm.js?efac:5637:1)
    at new Chart (chart.esm.js?efac:5402:1)

The code that might cause the error

chartjs-plugin-gradient/src/legend.js

Line 36 in c7140dd

const hitBox = chart.legend.legendHitBoxes[item.datasetIndex];

typo "module" (package.json).

package.json
"module": "dist/chartjs-plugin-gradient.ems.js"
ems -> esm.

so not found module by vite.

✘ [ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "chartjs-plugin-gradient". The package may have incorrect main/module/exports specified in its package.json.

Got some problems in console

react-dom.development.js?ac89:22839 Uncaught TypeError: Cannot read properties of undefined (reading 'datasetIndex')
at updateLegendItems (chartjs-plugin-gradient.esm.js?52eb:223:1)
at Object.afterUpdate (chartjs-plugin-gradient.esm.js?52eb:339:1)

Chart with stacked scales has got a different coloring than expected

The gradient size is based on chart area but, being the plugin bound to a scale and being a chart configured with stacked scale, the coloring is not as expected.

Plugin options:

gradient: {
  backgroundColor: {
    axis: 'y',
    colors: {
      0: 'green',
      50: 'blue',
      100: 'red'
    }
  }
}

Currently (chart area based):

Expected:

Time and timeseries scale support by setting formatted dates

At the moment, when the plugin is used in a chart with time or timeseries scale, the value to define the color stop must be configured in UTC (millis).
Probably this is not really comfortable for the users.

The keys of color object could be parsed (as done in the annotation plugin: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/src/helpers/helpers.chart.js#L13-L22)

Registering the Plugin

Just a little note about the registration part of the readme.

I think it should be.

Registering
All charts

Chart.register(gradient);
Single chart

const chart = new Chart(ctx, {
  // ...
  plugins: [gradient]
});

So per this SO question plugins should be an array, and I also changed Signle to Single ...

Thanks for making this plugin. It rocks!!

ReferenceError: CanvasGradient is not defined

ReferenceError: CanvasGradient is not defined
at isPatternOrGradient (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:750:57)
at Object.color (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:752:10)
at addColors (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chartjs-plugin-gradient\dist\chartjs-plugin-gradient.js:244:33)
at updateDataset (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chartjs-plugin-gradient\dist\chartjs-plugin-gradient.js:306:5)
at Object.beforeDatasetsUpdate (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chartjs-plugin-gradient\dist\chartjs-plugin-gradient.js:334:9)
at callback (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:800:15)
at PluginService._notify (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:6187:11)
at PluginService.notify (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:6174:25)
at Chart.notifyPlugins (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:7312:26)
at Chart._updateDatasets (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:6981:14)
at Chart.update (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:6901:10)
at new Chart (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chart.js\dist\chart.js:6667:12)
at ChartJSNodeCanvas.renderChart (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chartjs-node-canvas\dist\index.js:196:23)
at ChartJSNodeCanvas.renderToBuffer (F:\Code\Javascript\NodeJS\Discord Bot\node_modules\chartjs-node-canvas\dist\index.js:79:28)
at Object.execute (F:\Code\Javascript\NodeJS\Discord Bot\Commands\Information\info.js:373:56)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

I'm using chartjs-node-canvas

Distribution file sounds quite big

Having a look to the chartjs-plugin-gradient.min is quite big, 170K and seems containing also the CHART.JS part needed to the plugin.

Even if I'm not an expert and maybe I'm wrong, I think rollup configuration should be changed in order do not include anything but resolve everything at runtime.

Webpack can't compile when I import "gradient"

I have an issue when I'm trying to import this library.

I'm using webpack, and it doesn't compile the JS file and throws an error at the line:

import gradient from 'chartjs-plugin-gradient';

Here is the error message:

"./node_modules/chartjs-plugin-gradient/dist/chartjs-plugin-gradient.esm.js" contains a reference to the file "chart.js/helpers".
This file can not be found, please check it for typos or update it if the file got moved.

If I try something like:
import helpers from 'chart.js/helpers'; I have no error, so the helpers are found... But I keep having the issue at the line where I import gradient...

Any idea?

Uncaught DOMException: CanvasGradient.addColorStop: Invalid color

If you define in the color stop a non-color value, you get the following message:

Uncaught DOMException: CanvasGradient.addColorStop: Invalid color

Because the plugin is leveraging on @kurle/color, I would suggest to check if the color is valid before adding to the gradient, and, if not valid, skips it.
I'm sorry but I didn't find the error before the last version release.

I'm going to submit a PR to fix it.

Background Fill Wont Work In Vue.js 3

Hey there I was looking around and founded your great plugin! but it only work on border and it wont fill under the line chart as expected! Here is my sample and these are my dependencies I use:

PS: I'd be happy to help you fix the bug!

  "dependencies": {
    "vue": "^3.2.37",
    "vue-chartjs": "^4.1.1",
    "chartjs-plugin-gradient": "^0.5.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }

import { defineComponent, h, PropType } from 'vue'
import gradient from 'chartjs-plugin-gradient';
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
  Plugin
} from 'chart.js'

ChartJS.register(
  gradient,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
)

export default defineComponent({
  name: 'LineChart',
  components: {
    Line
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart'
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object as PropType<Partial<CSSStyleDeclaration>>,
      default: () => {
        accentColor: 'yellow'
        backgroundColor: 'yellow'
      }
    },
    plugins: {
      type: Array as PropType<Plugin<'line'>[]>,
      default: () => []
    }
  },
  setup(props) {
    const chartData = {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          gradient: {
            backgroundColor: {
              axis: 'y',
              colors: {
                0: 'red',
                50: 'yellow',
                100: 'green'
              }
            },
            borderColor: {
              axis: 'x',
              colors: {
                0: '#ffcb00',
                1: 'black',
                2: '#ffcb00',
                3: 'black'
              }
            }
          },
          tension: .4,
          data: [40, 39, 30, 40, 39, 50, 40]
        }
      ]
    }

    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        interaction: {
          mode: 'index',
        },
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
          },
        }
      },
      elements: {
        point: {
          radius: 0
        }
      },
    }

    return () =>
      h(Line, {
        chartData,
        chartOptions,
        chartId: props.chartId,
        width: props.width,
        height: props.height,
        cssClasses: props.cssClasses,
        styles: props.styles,
        plugins: props.plugins
      })
  }
})

Tooltip gradient doesn't working

I've some problem with gradient at tooltip. Can you guys give some advice?

tooltip: {
	gradient: {
		backgroundColor: {
			// linear-gradient(180deg, rgba(44, 110, 250, 0.7) 0%, rgba(2, 189, 173, 0.13) 100%);
			axis: "x",
			colors: {
			          0: "rgba(2, 189, 173, 0.13)",
			          5: "rgba(44, 110, 250, 0.2)",
				 10: "rgba(2, 189, 173, 0.12)",
			         15: "rgba(2, 189, 173, 0.13)",
                        }
		},
	},
},

Remove destroy plugin hook and replaced with afterDestroy

With CHART.JS 4, PR chartjs/Chart.js#10549, the destroy plugin hook has been removed and replaced with afterDestroy.
Currently, the version is not cleaning the states map.

gradient not working

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

`

Color not applied on hoverBackgroundColor

It would help to keep consistency if the gradient color was also applied on the property. hoverBackgroundColor fot the point that appears when hovering a line data point