This PR is:

1. adding test cases for all axes types
2. adding chartjs-adapter-luxon and luxon dependencies (enabling tests on time axes)
3. adding test-lint mpn command in order to add the lint test invoking npm test

Fix #17

This PR excludes the CHART.JS parts from distribution file of the plugin. It removes also the direct dependency from @kurkle/color, leveraging on what it's included in CHART.JS.

This PR is adding test suite in order to enable the tests.

The source was chartjs-plugin-annotation and maybe something is not "perfect".

What cannot do is to register the plugin globally (try in several ways without any success) therefore in this PR the plugin has been adding in the first test case.

EDIT: the global registration was fixed putting it in beforeAll hook. Thanks @kurkle

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

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.

Fix #15.

This PR is enable the feature to use in color node color stop as formatted date, leveraging on scale parsing.

Example:

gradient: {
  backgroundColor: {
    axis: 'x',
      colors: {
        "05/30/2021": 'green',
        "06/02/2021": 'blue',
        "06/04/2021": 'red'
      }
    }
  }
}

Time scale options:

scales: {
  x: {
    type: 'time', 
    time: {
      unit: 'day',
      parser: 'MM/dd/yyyy',
    }
  }
}

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

`

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)

Fix #28

This PR is enabling to set fillStyle and strokeStyle on the legend items related to datasets where the gradient has been set.

It is applying only backgroundColor and borderColor, if set.

TODO

• [x] enable at dataset level
• [x] enable at data level (for polarArea)
• [x] test cases scale 0-positive (covered)
• [x] test cases scale negative-0
• [x] test cases scale positive-positive
• [x] test cases scale negative-positive
• [x] test cases scale negative-negative

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

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)",
                        }
		},
	},
},

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?