├── .eslintrc.yml ├── .github ├── dependabot.yml ├── release-drafter.yml └── workflows │ ├── ci.yml │ ├── npmpublish.yml │ └── release-drafter.yml ├── .gitignore ├── .vscode └── tasks.json ├── LICENSE ├── README.md ├── karma.conf.cjs ├── package-lock.json ├── package.json ├── rollup.config.js ├── sample.png ├── samples ├── .eslintrc.yml ├── background.html ├── border.html ├── both.html ├── style.css └── utils.js ├── sonar-project.properties ├── src ├── colors.js ├── helpers.js ├── index.js └── legend.js ├── test ├── .eslintrc.yml ├── fixtures │ ├── missingColors.js │ ├── missingColors.png │ ├── rRadialLinear.js │ ├── rRadialLinear.png │ ├── rRadialLinear0Negative.js │ ├── rRadialLinear0Negative.png │ ├── rRadialLinearAndLegend.js │ ├── rRadialLinearAndLegend.png │ ├── rRadialLinearAndLegendDataIndex.js │ ├── rRadialLinearAndLegendDataIndex.png │ ├── rRadialLinearAndLegendDataIndexReverse.js │ ├── rRadialLinearAndLegendDataIndexReverse.png │ ├── rRadialLinearBorderColorAndLegendDataIndex.js │ ├── rRadialLinearBorderColorAndLegendDataIndex.png │ ├── rRadialLinearHovereBorderColorAndLegendDataIndex.js │ ├── rRadialLinearHovereBorderColorAndLegendDataIndex.png │ ├── rRadialLinearNegativeNegative.js │ ├── rRadialLinearNegativeNegative.png │ ├── rRadialLinearNegativePositive.js │ ├── rRadialLinearNegativePositive.png │ ├── rRadialLinearPositivePositive.js │ ├── rRadialLinearPositivePositive.png │ ├── rRadialLinearReverse.js │ ├── rRadialLinearReverse.png │ ├── wrongColor.js │ ├── wrongColor.png │ ├── wrongColors.js │ ├── wrongColors.png │ ├── wrongColorsConfig.js │ ├── wrongColorsConfig.png │ ├── xCartesianCategory.js │ ├── xCartesianCategory.png │ ├── xCartesianCategoryAndLegend.js │ ├── xCartesianCategoryAndLegend.png │ ├── xCartesianCategoryBorderColor.js │ ├── xCartesianCategoryBorderColor.png │ ├── xCartesianCategoryBorderColorAndLegend.js │ ├── xCartesianCategoryBorderColorAndLegend.png │ ├── xCartesianCategoryByIndex.js │ ├── xCartesianCategoryByIndex.png │ ├── xCartesianLinear.js │ ├── xCartesianLinear.png │ ├── xCartesianTime.js │ ├── xCartesianTime.png │ ├── xCartesianTimeParsing.js │ ├── xCartesianTimeParsing.png │ ├── xCartesianTimeParsingOnColors.js │ ├── xCartesianTimeParsingOnColors.png │ ├── yCartesianLinear.js │ ├── yCartesianLinear.png │ ├── yCartesianLinear0Negative.js │ ├── yCartesianLinear0Negative.png │ ├── yCartesianLinearAndLegend.js │ ├── yCartesianLinearAndLegend.png │ ├── yCartesianLinearBorderColor.js │ ├── yCartesianLinearBorderColor.png │ ├── yCartesianLinearLineColor.js │ ├── yCartesianLinearLineColor.png │ ├── yCartesianLinearLineColorReverse.js │ ├── yCartesianLinearLineColorReverse.png │ ├── yCartesianLinearNegativeNegative.js │ ├── yCartesianLinearNegativeNegative.png │ ├── yCartesianLinearNegativePositive.js │ ├── yCartesianLinearNegativePositive.png │ ├── yCartesianLinearPointBorderColor.js │ ├── yCartesianLinearPointBorderColor.png │ ├── yCartesianLinearPositivePositive.js │ ├── yCartesianLinearPositivePositive.png │ ├── yCartesianLinearReverse.js │ ├── yCartesianLinearReverse.png │ ├── yCartesianLinearStacked.js │ ├── yCartesianLinearStacked.png │ ├── yCartesianLogarithmic.js │ └── yCartesianLogarithmic.png ├── index.js └── specs │ └── gradient.spec.js └── types ├── index.d.ts └── options.d.ts /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | extends: 2 | - chartjs 3 | - plugin:es/no-new-in-es2019 4 | - plugin:markdown/recommended 5 | - plugin:@typescript-eslint/recommended 6 | 7 | env: 8 | es6: true 9 | browser: true 10 | node: true 11 | 12 | parser: '@typescript-eslint/parser' 13 | 14 | parserOptions: 15 | ecmaVersion: 2018 16 | sourceType: module 17 | ecmaFeatures: 18 | impliedStrict: true 19 | modules: true 20 | 21 | plugins: ['html', 'es', '@typescript-eslint'] 22 | 23 | rules: 24 | class-methods-use-this: "off" 25 | complexity: ["warn", 10] 26 | max-statements: ["warn", 30] 27 | no-empty-function: "off" 28 | no-use-before-define: ["error", { "functions": false }] 29 | # disable everything, except Rest/Spread Properties in ES2018 30 | es/no-async-iteration: "error" 31 | es/no-malformed-template-literals: "error" 32 | es/no-regexp-lookbehind-assertions: "error" 33 | es/no-regexp-named-capture-groups: "error" 34 | es/no-regexp-s-flag: "error" 35 | es/no-regexp-unicode-property-escapes: "error" 36 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "weekly" 7 | - package-ecosystem: "github-actions" 8 | directory: "/" 9 | schedule: 10 | interval: "weekly" 11 | -------------------------------------------------------------------------------- /.github/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name-template: 'v$RESOLVED_VERSION' 2 | tag-template: 'v$RESOLVED_VERSION' 3 | categories: 4 | - title: 'Breaking Changes' 5 | labels: 6 | - 'breaking change' 7 | - title: 'Enhancements' 8 | labels: 9 | - 'enhancement' 10 | - title: 'Bugs Fixed' 11 | labels: 12 | - 'bug' 13 | - title: 'Types' 14 | labels: 15 | - 'types' 16 | - title: 'Documentation' 17 | labels: 18 | - 'documentation' 19 | - title: 'Development' 20 | labels: 21 | - 'chore' 22 | exclude-labels: 23 | - 'infrastructure' 24 | change-template: '- #$NUMBER $TITLE' 25 | change-title-escapes: '\<*_&`#@' 26 | version-resolver: 27 | major: 28 | labels: 29 | - 'breaking change' 30 | minor: 31 | labels: 32 | - 'enhancement' 33 | patch: 34 | labels: 35 | - 'bug' 36 | - 'chore' 37 | - 'types' 38 | default: patch 39 | template: | 40 | # Essential Links 41 | * [npm](https://www.npmjs.com/package/chartjs-plugin-gradient) 42 | $CHANGES 43 | Thanks to $CONTRIBUTORS -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | jobs: 10 | ci: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | with: 15 | fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis (SonarCloud) 16 | - name: Use Node.js 17 | uses: actions/setup-node@v4 18 | with: 19 | cache: npm 20 | node-version: 16 21 | - run: | 22 | npm ci 23 | npm run build 24 | xvfb-run --auto-servernum npm test 25 | -------------------------------------------------------------------------------- /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | publish-npm: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 16 15 | registry-url: https://registry.npmjs.org/ 16 | - name: Build 17 | run: | 18 | npm ci 19 | npm run lint 20 | npm run build 21 | - run: npm publish --access public 22 | env: 23 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 24 | -------------------------------------------------------------------------------- /.github/workflows/release-drafter.yml: -------------------------------------------------------------------------------- 1 | name: Release Drafter 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | correct_repository: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - name: fail on fork 13 | if: github.repository_owner != 'kurkle' 14 | run: exit 1 15 | 16 | update_release_draft: 17 | needs: correct_repository 18 | runs-on: ubuntu-latest 19 | steps: 20 | - uses: release-drafter/release-drafter@v6 21 | env: 22 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Deployment 2 | dist/ 3 | /coverage/ 4 | 5 | # Node.js 6 | node_modules/ 7 | 8 | # Development 9 | .project 10 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "type": "npm", 6 | "script": "build", 7 | "group": { 8 | "kind": "build", 9 | "isDefault": true 10 | }, 11 | "problemMatcher": [], 12 | "label": "npm: build", 13 | "detail": "rollup -c" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020-2021 Jukka Kurkela 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chartjs-plugin-gradient 2 | 3 | [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-plugin-gradient&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-plugin-gradient) 4 | 5 | *Easy gradients for [Chart.js](https://www.chartjs.org)* 6 | 7 | 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. 8 | 9 | **NOTE** the plugin does not automatically register. 10 | 11 | ## Example 12 | 13 | ![Example chart](https://github.com/kurkle/chartjs-plugin-gradient/raw/main/sample.png "Example chart") 14 | 15 | ## Installation 16 | 17 | NPM: 18 | 19 | ```bash 20 | npm i --save-dev chartjs-plugin-gradient 21 | ``` 22 | 23 | CDN: 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ## Usage 30 | 31 | ### loading 32 | 33 | ESM 34 | 35 | ```js 36 | import gradient from 'chartjs-plugin-gradient'; 37 | ``` 38 | 39 | CDN 40 | 41 | ```js 42 | const gradient = window['chartjs-plugin-gradient']; 43 | ``` 44 | 45 | ### Registering 46 | 47 | All charts 48 | 49 | ```js 50 | Chart.register(gradient); 51 | ``` 52 | 53 | Signle chart 54 | 55 | ```js 56 | const chart = new Chart(ctx, { 57 | // ... 58 | plugins: { 59 | gradient 60 | } 61 | }); 62 | ``` 63 | 64 | ### Configuration 65 | 66 | The gradient colors are configured in the `gradient` key of dataset 67 | 68 | ```js 69 | const chart = new Chart(ctx, { 70 | data: { 71 | datasets: [{ 72 | // data 73 | gradient: { 74 | backgroundColor: { 75 | axis: 'y', 76 | colors: { 77 | 0: 'red', 78 | 50: 'yellow', 79 | 100: 'green' 80 | } 81 | }, 82 | borderColor: { 83 | axis: 'x', 84 | colors: { 85 | 0: 'black', 86 | 1: 'white', 87 | 2: 'black', 88 | 3: 'white' 89 | } 90 | } 91 | } 92 | }] 93 | } 94 | }); 95 | ``` 96 | 97 | ## License 98 | 99 | `chartjs-plugin-gradient.js` is available under the [MIT license](https://github.com/kurkle/chartjs-plugin-gradient/blob/main/LICENSE). 100 | -------------------------------------------------------------------------------- /karma.conf.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const istanbul = require('rollup-plugin-istanbul'); 3 | const json = require('@rollup/plugin-json'); 4 | const resolve = require('@rollup/plugin-node-resolve').default; 5 | const yargs = require('yargs'); 6 | const env = process.env.NODE_ENV; 7 | 8 | module.exports = async function(karma) { 9 | const builds = (await import('./rollup.config.js')).default; 10 | const args = yargs 11 | .option('verbose', {default: false}) 12 | .argv; 13 | 14 | // Use the same rollup config as our dist files: when debugging (npm run dev), 15 | // we will prefer the unminified build which is easier to browse and works 16 | // better with source mapping. In other cases, pick the minified build to 17 | // make sure that the minification process (terser) doesn't break anything. 18 | const regex = karma.autoWatch ? /chartjs-plugin-gradient\.js$/ : /chartjs-plugin-gradient\.min\.js$/; 19 | const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0]; 20 | 21 | if (env === 'test') { 22 | build.plugins = [ 23 | json(), 24 | resolve(), 25 | istanbul({exclude: ['node_modules/**/*.js', 'package.json']}) 26 | ]; 27 | } 28 | 29 | karma.set({ 30 | frameworks: ['jasmine'], 31 | plugins: ['karma-*'], 32 | reporters: ['progress', 'kjhtml'], 33 | browsers: (args.browsers || 'chrome,firefox').split(','), 34 | logLevel: karma.LOG_INFO, 35 | 36 | client: { 37 | jasmine: { 38 | stopOnSpecFailure: !!karma.autoWatch 39 | } 40 | }, 41 | 42 | customLaunchers: { 43 | chrome: { 44 | base: 'Chrome', 45 | flags: [ 46 | '--disable-background-timer-throttling', 47 | '--disable-backgrounding-occluded-windows', 48 | '--disable-renderer-backgrounding' 49 | ] 50 | }, 51 | firefox: { 52 | base: 'Firefox', 53 | prefs: { 54 | 'layers.acceleration.disabled': true 55 | } 56 | } 57 | }, 58 | 59 | files: [ 60 | {pattern: 'test/fixtures/*.js', included: false}, 61 | {pattern: 'test/fixtures/*.png', included: false}, 62 | {pattern: 'node_modules/chart.js/dist/chart.umd.js'}, 63 | {pattern: 'node_modules/luxon/build/global/luxon.js'}, 64 | {pattern: 'node_modules/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.umd.js'}, 65 | {pattern: 'src/index.js', watched: false}, 66 | {pattern: 'test/index.js'}, 67 | {pattern: 'test/specs/**.js'} 68 | ], 69 | 70 | preprocessors: { 71 | 'src/index.js': ['sources'], 72 | 'test/index.js': ['rollup'] 73 | }, 74 | 75 | rollupPreprocessor: { 76 | plugins: [ 77 | resolve(), 78 | ], 79 | output: { 80 | name: 'test', 81 | format: 'umd', 82 | sourcemap: karma.autoWatch ? 'inline' : false 83 | } 84 | }, 85 | 86 | customPreprocessors: { 87 | sources: { 88 | base: 'rollup', 89 | options: build 90 | } 91 | }, 92 | 93 | // These settings deal with browser disconnects. We had seen test flakiness from Firefox 94 | // [Firefox 56.0.0 (Linux 0.0.0)]: Disconnected (1 times), because no message in 10000 ms. 95 | // https://github.com/jasmine/jasmine/issues/1327#issuecomment-332939551 96 | captureTimeout: 120000, 97 | browserDisconnectTimeout: 120000, 98 | browserDisconnectTolerance: 3, 99 | browserNoActivityTimeout: 120000, 100 | }); 101 | 102 | if (env === 'test') { 103 | karma.reporters.push('coverage'); 104 | karma.coverageReporter = { 105 | dir: 'coverage/', 106 | reporters: [ 107 | {type: 'html', subdir: 'html'}, 108 | {type: 'lcovonly', subdir: (browser) => browser.toLowerCase().split(/[ /-]/)[0]} 109 | ] 110 | }; 111 | } 112 | }; 113 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chartjs-plugin-gradient", 3 | "version": "0.6.1", 4 | "description": "Easy gradient colors for Chart.js", 5 | "type": "module", 6 | "main": "dist/chartjs-plugin-gradient.esm.js", 7 | "jsdelivr": "dist/chartjs-plugin-gradient.min.js", 8 | "unpkg": "dist/chartjs-plugin-gradient.min.js", 9 | "exports": { 10 | "types": "./types/index.d.ts", 11 | "import": "./dist/chartjs-plugin-gradient.esm.js", 12 | "require": "./dist/chartjs-plugin-gradient.min.js" 13 | }, 14 | "types": "./types/index.d.ts", 15 | "scripts": { 16 | "build": "rollup -c", 17 | "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome", 18 | "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox", 19 | "lint": "concurrently --group \"npm:lint-*\"", 20 | "lint-js": "eslint \"test/**/*.js\" \"src/**/*.js\" \"types/**/*.ts\"", 21 | "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"", 22 | "test-karma": "karma start ./karma.conf.cjs --no-auto-watch --single-run", 23 | "test-lint": "npm run lint" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/kurkle/chartjs-plugin-gradient.git" 28 | }, 29 | "files": [ 30 | "dist/*", 31 | "types/*.d.ts" 32 | ], 33 | "keywords": [ 34 | "chart.js", 35 | "plugin", 36 | "color", 37 | "palette", 38 | "generator", 39 | "auto" 40 | ], 41 | "author": "Jukka Kurkela ", 42 | "license": "MIT", 43 | "bugs": { 44 | "url": "https://github.com/kurkle/chartjs-plugin-gradient/issues" 45 | }, 46 | "homepage": "https://github.com/kurkle/chartjs-plugin-gradient#readme", 47 | "devDependencies": { 48 | "@rollup/plugin-json": "^6.0.0", 49 | "@rollup/plugin-node-resolve": "^15.0.1", 50 | "@rollup/plugin-terser": "^0.4.0", 51 | "@typescript-eslint/eslint-plugin": "^5.19.0", 52 | "@typescript-eslint/parser": "^5.19.0", 53 | "chart.js": "^4.0.1", 54 | "chartjs-adapter-luxon": "^1.3.0", 55 | "chartjs-test-utils": "^0.5.0", 56 | "concurrently": "^9.1.0", 57 | "cross-env": "^7.0.3", 58 | "eslint": "^8.12.0", 59 | "eslint-config-chartjs": "^0.3.0", 60 | "eslint-plugin-es": "^4.1.0", 61 | "eslint-plugin-html": "^8.1.2", 62 | "eslint-plugin-markdown": "^3.0.0", 63 | "fs-extra": "^11.1.0", 64 | "karma": "^6.3.2", 65 | "karma-chrome-launcher": "^3.1.0", 66 | "karma-coverage": "^2.0.3", 67 | "karma-firefox-launcher": "^2.1.0", 68 | "karma-jasmine": "^5.1.0", 69 | "karma-jasmine-html-reporter": "^2.0.0", 70 | "karma-rollup-preprocessor": "7.0.7", 71 | "luxon": "^3.1.0", 72 | "mocha": "^11.1.0", 73 | "pixelmatch": "^6.0.0", 74 | "rollup": "^3.3.0", 75 | "rollup-plugin-istanbul": "^5.0.0", 76 | "typescript": "^5.6.2" 77 | }, 78 | "peerDependencies": { 79 | "chart.js": ">=2.6.0" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve'; 2 | import terser from '@rollup/plugin-terser'; 3 | import {readFileSync} from 'fs'; 4 | 5 | const {name, version, homepage, main} = JSON.parse(readFileSync('./package.json')); 6 | 7 | const banner = `/*! 8 | * ${name} v${version} 9 | * ${homepage} 10 | * (c) ${(new Date(process.env.SOURCE_DATE_EPOCH ? (process.env.SOURCE_DATE_EPOCH * 1000) : new Date().getTime())).getFullYear()} Jukka Kurkela 11 | * Released under the MIT License 12 | */`; 13 | 14 | const input = 'src/index.js'; 15 | const external = [ 16 | 'chart.js', 17 | 'chart.js/helpers' 18 | ]; 19 | const globals = { 20 | 'chart.js': 'Chart', 21 | 'chart.js/helpers': 'Chart.helpers' 22 | }; 23 | 24 | export default [ 25 | { 26 | input, 27 | plugins: [ 28 | resolve() 29 | ], 30 | output: { 31 | name, 32 | file: main, 33 | banner, 34 | format: 'esm', 35 | indent: false 36 | }, 37 | external 38 | }, 39 | { 40 | input, 41 | plugins: [ 42 | resolve() 43 | ], 44 | output: { 45 | name, 46 | file: main.replace('.esm.js', '.js'), 47 | banner, 48 | format: 'umd', 49 | indent: false, 50 | globals 51 | }, 52 | external 53 | }, 54 | { 55 | input, 56 | plugins: [ 57 | resolve(), 58 | terser({ 59 | output: { 60 | preamble: banner 61 | } 62 | }) 63 | ], 64 | output: { 65 | name, 66 | file: main.replace('.esm.js', '.min.js'), 67 | format: 'umd', 68 | sourcemap: true, 69 | indent: false, 70 | globals 71 | }, 72 | external 73 | }, 74 | ]; 75 | -------------------------------------------------------------------------------- /sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/sample.png -------------------------------------------------------------------------------- /samples/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | globals: 2 | Chart: true 3 | Utils: true 4 | 5 | rules: 6 | indent: ["error", "tab", {flatTernaryExpressions: true}] 7 | no-new: "off" 8 | -------------------------------------------------------------------------------- /samples/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Easy gradient colors for Chart.js 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /samples/border.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Easy gradient colors for Chart.js 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /samples/both.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Easy gradient colors for Chart.js 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /samples/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | #canvas-holder{ 6 | width:80%; 7 | margin: auto; 8 | } 9 | div.canvas-holder { 10 | width: 210px; 11 | height: 150px; 12 | margin: auto; 13 | } 14 | -------------------------------------------------------------------------------- /samples/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function(Utils) { 4 | const localUrl = '../dist/chartjs-plugin-gradient.js'; 5 | const remoteUrl = 'https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient/dist/chartjs-plugin-gradient.min.js'; 6 | 7 | function addScript(url, done, error) { 8 | const head = document.getElementsByTagName('head')[0]; 9 | const script = document.createElement('script'); 10 | script.type = 'text/javascript'; 11 | script.onreadystatechange = function() { 12 | if (this.readyState === 'complete') { 13 | done(); 14 | } 15 | }; 16 | script.onload = done; 17 | script.onerror = error; 18 | script.src = url; 19 | head.appendChild(script); 20 | return true; 21 | } 22 | 23 | function loadError() { 24 | const msg = document.createTextNode('Error loading chartjs-plugin-gradient'); 25 | document.body.appendChild(msg); 26 | return true; 27 | } 28 | 29 | Utils.load = function(done) { 30 | addScript(localUrl, done, (event) => { 31 | event.preventDefault(); 32 | event.stopPropagation(); 33 | addScript(remoteUrl, done, loadError); 34 | }); 35 | }; 36 | }(window.Utils = window.Utils || {})); 37 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.projectKey=kurkle_chartjs-plugin-gradient 2 | sonar.organization=kurkle 3 | 4 | # This is the name and version displayed in the SonarCloud UI. 5 | #sonar.projectName=chartjs-plugin-gradient 6 | #sonar.projectVersion=1.0 7 | 8 | # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows. 9 | #sonar.sources=. 10 | 11 | # Encoding of the source code. Default is default system encoding 12 | #sonar.sourceEncoding=UTF-8 13 | 14 | sonar.javascript.lcov.reportPaths=coverage/chrome/lcov.info,coverage/firefox/lcov.info 15 | sonar.coverage.exclusions=samples/**,test/**,*.config.js,*.conf.js 16 | sonar.test.exclusions=test/** 17 | sonar.exclusions=samples/**,test/** 18 | -------------------------------------------------------------------------------- /src/colors.js: -------------------------------------------------------------------------------- 1 | import {color} from 'chart.js/helpers'; 2 | import {getGradientData, getPixelStop} from './helpers'; 3 | 4 | // IEC 61966-2-1:1999 5 | const toRGBs = (l) => l <= 0.0031308 ? l * 12.92 : Math.pow(l, 1.0 / 2.4) * 1.055 - 0.055; 6 | // IEC 61966-2-1:1999 7 | const fromRGBs = (srgb) => srgb <= 0.04045 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4); 8 | 9 | function interpolate(percent, startColor, endColor) { 10 | const start = startColor.color.rgb; 11 | const startR = fromRGBs(start.r / 255); 12 | const startG = fromRGBs(start.g / 255); 13 | const startB = fromRGBs(start.b / 255); 14 | 15 | const end = endColor.color.rgb; 16 | const endR = fromRGBs(end.r / 255); 17 | const endG = fromRGBs(end.g / 255); 18 | const endB = fromRGBs(end.b / 255); 19 | 20 | return color({ 21 | r: Math.round(toRGBs(startR + percent * (endR - startR)) * 255), 22 | g: Math.round(toRGBs(startG + percent * (endG - startG)) * 255), 23 | b: Math.round(toRGBs(startB + percent * (endB - startB)) * 255), 24 | a: start.a + percent * Math.abs(end.a - start.a) 25 | }); 26 | } 27 | 28 | /** 29 | * Calculate a color from gradient stop color by a value of the dataset. 30 | * @param {Object} state - state of the plugin 31 | * @param {{key: string, legendItemKey: string}} keyOption - option of the dataset where the gradient is applied 32 | * @param {number} datasetIndex - dataset index 33 | * @param {number} value - value used for searching the color 34 | * @returns {Object} calculated color 35 | */ 36 | export function getInterpolatedColorByValue(state, keyOption, datasetIndex, value) { 37 | const data = getGradientData(state, keyOption, datasetIndex); 38 | if (!data || !data.stopColors.length) { 39 | return; 40 | } 41 | const {stop: percent} = getPixelStop(data.scale, value); 42 | let startColor, endColor; 43 | for (const stopColor of data.stopColors) { 44 | if (stopColor.stop === percent) { 45 | return stopColor.color; 46 | } 47 | if (stopColor.stop < percent) { 48 | startColor = stopColor; 49 | } else if (stopColor.stop > percent && !endColor) { 50 | endColor = stopColor; 51 | } 52 | } 53 | if (!endColor) { 54 | return startColor; 55 | } 56 | return interpolate(percent, startColor, endColor); 57 | } 58 | -------------------------------------------------------------------------------- /src/helpers.js: -------------------------------------------------------------------------------- 1 | import {Chart} from 'chart.js'; 2 | import {isNumber} from 'chart.js/helpers'; 3 | 4 | export const isChartV3 = Chart.version; 5 | 6 | const parse = isChartV3 7 | ? (scale, value) => scale.parse(value) 8 | : (scale, value) => value; 9 | 10 | function scaleValue(scale, value) { 11 | const normValue = isNumber(value) ? parseFloat(value) : parse(scale, value); 12 | return scale.getPixelForValue(normValue); 13 | } 14 | 15 | /** 16 | * @typedef { import("chart.js").Chart } Chart 17 | * @typedef { import("chart.js").Scale } Scale 18 | */ 19 | 20 | /** 21 | * check if the area is consistent 22 | * @param {Object} area - area to check 23 | * @returns {boolean} 24 | */ 25 | export const areaIsValid = (area) => area && area.right > area.left && area.bottom > area.top; 26 | 27 | /** 28 | * Create a canvas gradient 29 | * @param {CanvasRenderingContext2D} ctx - chart canvas context 30 | * @param {string} axis - axis type of scale 31 | * @param {Object} area - scale instance 32 | * @returns {CanvasGradient} created gradient 33 | */ 34 | export function createGradient(ctx, axis, area) { 35 | if (axis === 'r') { 36 | return ctx.createRadialGradient(area.xCenter, area.yCenter, 0, area.xCenter, area.yCenter, area.drawingArea); 37 | } 38 | if (axis === 'y') { 39 | return ctx.createLinearGradient(0, area.bottom, 0, area.top); 40 | } 41 | return ctx.createLinearGradient(area.left, 0, area.right, 0); 42 | } 43 | 44 | /** 45 | * Add color stop to a gradient 46 | * @param {CanvasGradient} gradient - gradient instance 47 | * @param {Array} colors - all colors to add 48 | */ 49 | export function applyColors(gradient, colors) { 50 | colors.forEach(function(item) { 51 | gradient.addColorStop( 52 | item.stop, item.color.rgbString() 53 | ); 54 | }); 55 | } 56 | 57 | /** 58 | * Get the gradient plugin configuration from the state for a specific dataset option 59 | * @param {Object} state - state of the plugin 60 | * @param {{key: string, legendItemKey: string}} keyOption - option of the dataset where the gradient is applied 61 | * @param {number} datasetIndex - dataset index 62 | * @returns {Object|undefined} gradient plugin configuration from the state for a specific dataset option 63 | */ 64 | export function getGradientData(state, keyOption, datasetIndex) { 65 | if (state.options.has(keyOption.key)) { 66 | const option = state.options.get(keyOption.key); 67 | const gradientData = option.filter((el) => el.datasetIndex === datasetIndex); 68 | if (gradientData.length) { 69 | return gradientData[0]; 70 | } 71 | } 72 | } 73 | 74 | /** 75 | * Get the pixel and its percentage on the scale, used for color stop in the gradient, for the passed value 76 | * @param {Scale} scale - scale used by dataset 77 | * @param {string|number} value - value to search 78 | * @returns {{pixel: number, stop: number}} the pixel and its percentage on the scale, used for color stop in the gradient 79 | */ 80 | export function getPixelStop(scale, value) { 81 | if (scale.type === 'radialLinear') { 82 | const distance = scale.getDistanceFromCenterForValue(value); 83 | return {pixel: distance, stop: distance / scale.drawingArea}; 84 | } 85 | const reverse = scale.options.reverse; 86 | const pixel = scaleValue(scale, value); 87 | const stop = scale.getDecimalForPixel(pixel); 88 | return {pixel, stop: reverse ? 1 - stop : stop}; 89 | } 90 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {color} from 'chart.js/helpers'; 2 | import {updateLegendItems} from './legend'; 3 | import {areaIsValid, createGradient, applyColors, getPixelStop, isChartV3} from './helpers'; 4 | 5 | const chartStates = new Map(); 6 | 7 | const getScale = isChartV3 8 | ? (meta, axis) => meta[axis + 'Scale'] 9 | : (meta, axis) => meta.controller['_' + axis + 'Scale']; 10 | 11 | function addColors(scale, colors, stopColors) { 12 | for (const value of Object.keys(colors)) { 13 | const {pixel, stop} = getPixelStop(scale, value); 14 | if (isFinite(pixel) && isFinite(stop)) { 15 | const colorStop = color(colors[value]); 16 | if (colorStop && colorStop.valid) { 17 | stopColors.push({ 18 | stop: Math.max(0, Math.min(1, stop)), 19 | color: colorStop 20 | }); 21 | } 22 | } 23 | } 24 | stopColors.sort((a, b) => a.stop - b.stop); 25 | } 26 | 27 | function setValue(meta, dataset, key, value) { 28 | dataset[key] = value; 29 | if (!meta.dataset) { 30 | return; 31 | } 32 | 33 | if (meta.dataset.options) { 34 | meta.dataset.options[key] = value; 35 | } else { 36 | meta.dataset[key] = value; 37 | } 38 | } 39 | 40 | function getStateOptions(state, meta, key, datasetIndex) { 41 | let stateOptions = state.options.get(key); 42 | if (!stateOptions) { 43 | stateOptions = []; 44 | state.options.set(key, stateOptions); 45 | } else if (!meta.hidden) { 46 | stateOptions = stateOptions.filter((el) => el.datasetIndex !== datasetIndex); 47 | state.options.set(key, stateOptions); 48 | } 49 | return stateOptions; 50 | } 51 | 52 | function updateDataset(chart, state, gradient, dataset, datasetIndex) { 53 | const ctx = chart.ctx; 54 | const meta = chart.getDatasetMeta(datasetIndex); 55 | if (meta.hidden) { 56 | return; 57 | } 58 | for (const [key, options] of Object.entries(gradient)) { 59 | const {axis, colors} = options; 60 | if (!colors) { 61 | continue; 62 | } 63 | const scale = getScale(meta, axis); 64 | if (!scale) { 65 | console.warn(`Scale not found for '${axis}'-axis in datasets[${datasetIndex}] of chart id ${chart.id}, skipping.`); 66 | continue; 67 | } 68 | const stateOptions = getStateOptions(state, meta, key, datasetIndex); 69 | const option = { 70 | datasetIndex, 71 | axis, 72 | scale, 73 | stopColors: [] 74 | }; 75 | stateOptions.push(option); 76 | const value = createGradient(ctx, axis, scale); 77 | addColors(scale, colors, option.stopColors); 78 | if (option.stopColors.length) { 79 | applyColors(value, option.stopColors); 80 | setValue(meta, dataset, key, value); 81 | } 82 | } 83 | } 84 | 85 | export default { 86 | id: 'gradient', 87 | 88 | beforeInit(chart) { 89 | const state = {}; 90 | state.options = new Map(); 91 | chartStates.set(chart, state); 92 | }, 93 | 94 | beforeDatasetsUpdate(chart) { 95 | const area = chart.chartArea; 96 | if (!areaIsValid(area)) { 97 | return; 98 | } 99 | const state = chartStates.get(chart); 100 | const datasets = chart.data.datasets; 101 | for (let i = 0; i < datasets.length; i++) { 102 | const dataset = datasets[i]; 103 | const gradient = dataset.gradient; 104 | if (gradient) { 105 | updateDataset(chart, state, gradient, dataset, i); 106 | } 107 | } 108 | }, 109 | 110 | afterUpdate(chart) { 111 | const state = chartStates.get(chart); 112 | if (chart.legend && chart.legend.options.display !== false && isChartV3) { 113 | updateLegendItems(chart, state); 114 | } 115 | }, 116 | 117 | // compatibility Chart.js v3 118 | destroy(chart) { 119 | chartStates.delete(chart); 120 | }, 121 | 122 | afterDestroy(chart) { 123 | chartStates.delete(chart); 124 | } 125 | 126 | }; 127 | -------------------------------------------------------------------------------- /src/legend.js: -------------------------------------------------------------------------------- 1 | import {defined} from 'chart.js/helpers'; 2 | import {getInterpolatedColorByValue} from './colors'; 3 | import {areaIsValid, createGradient, applyColors, getGradientData} from './helpers'; 4 | 5 | const legendOptions = [ 6 | {key: 'backgroundColor', legendItemKey: 'fillStyle'}, 7 | {key: 'borderColor', legendItemKey: 'strokeStyle'}]; 8 | 9 | const legendBoxHeight = (chart, options) => options.labels && options.labels.font && defined(options.labels.font.size) 10 | ? options.labels.font.size 11 | : chart.options.font.size; 12 | 13 | function setLegendItem(state, ctx, keyOption, item, area) { 14 | const data = getGradientData(state, keyOption, item.datasetIndex); 15 | if (!data || !data.stopColors.length) { 16 | return; 17 | } 18 | const value = createGradient(ctx, data.axis, area); 19 | applyColors(value, data.stopColors); 20 | item[keyOption.legendItemKey] = value; 21 | } 22 | 23 | function buildArea(hitBox, {boxWidth, boxHeight}) { 24 | return { 25 | top: hitBox.top, 26 | left: hitBox.left, 27 | bottom: hitBox.top + boxHeight, 28 | right: hitBox.left + boxWidth, 29 | xCenter: hitBox.left + boxWidth / 2, 30 | yCenter: hitBox.top + boxHeight / 2, 31 | drawingArea: Math.max(boxWidth, boxHeight) / 2 32 | }; 33 | } 34 | 35 | function applyGradientToLegendByDatasetIndex(chart, state, item, boxSize) { 36 | const hitBox = chart.legend.legendHitBoxes[item.datasetIndex]; 37 | const area = buildArea(hitBox, boxSize); 38 | if (areaIsValid(area)) { 39 | legendOptions.forEach(function(keyOption) { 40 | setLegendItem(state, chart.ctx, keyOption, item, area); 41 | }); 42 | } 43 | } 44 | 45 | function applyGradientToLegendByDataIndex(chart, state, dataset, datasetIndex) { 46 | for (const item of chart.legend.legendItems) { 47 | legendOptions.forEach(function(keyOption) { 48 | const value = dataset.data[item.index]; 49 | const c = getInterpolatedColorByValue(state, keyOption, datasetIndex, value); 50 | if (c && c.valid) { 51 | item[keyOption.legendItemKey] = c.rgbString(); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | /** 58 | * @typedef { import("chart.js").Chart } Chart 59 | */ 60 | 61 | /** 62 | * Udpate the legend items, applying the gradients 63 | * @param {Chart} chart - chart instance 64 | * @param {Object} state - state of the plugin 65 | */ 66 | export function updateLegendItems(chart, state) { 67 | const legend = chart.legend; 68 | const options = legend.options; 69 | const boxHeight = options.labels.boxHeight 70 | ? options.labels.boxHeight 71 | : legendBoxHeight(chart, options); 72 | const boxWidth = options.labels.boxWidth; 73 | const datasets = chart.data.datasets; 74 | for (let i = 0; i < datasets.length; i++) { 75 | const item = legend.legendItems[i]; 76 | if (item.datasetIndex === i) { 77 | applyGradientToLegendByDatasetIndex(chart, state, item, {boxWidth, boxHeight}); 78 | } else { 79 | applyGradientToLegendByDataIndex(chart, state, datasets[i], i); 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /test/.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | jasmine: true 3 | 4 | globals: 5 | acquireChart: true 6 | afterEvent: true 7 | Chart: true 8 | createMockContext: true 9 | __karma__: true 10 | releaseChart: true 11 | waitForResize: true 12 | -------------------------------------------------------------------------------- /test/fixtures/missingColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x' 11 | } 12 | } 13 | }], 14 | }, 15 | options: { 16 | scales: { 17 | x: { 18 | display: false, 19 | }, 20 | y: { 21 | display: false, 22 | beginAtZero: true 23 | } 24 | }, 25 | plugins: { 26 | legend: false 27 | } 28 | } 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /test/fixtures/missingColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/missingColors.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinear.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [0, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | r: { 23 | display: true, 24 | beginAtZero: true 25 | } 26 | }, 27 | plugins: { 28 | legend: false 29 | } 30 | } 31 | }, 32 | options: { 33 | spriteText: true 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinear.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinear0Negative.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, -29, -80, -10, -55, 0, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | 0: 'red', 13 | '-50': 'yellow', 14 | '-80': 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | r: { 23 | display: true 24 | } 25 | }, 26 | plugins: { 27 | legend: false 28 | } 29 | } 30 | }, 31 | options: { 32 | spriteText: true 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinear0Negative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinear0Negative.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegend.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [0, 29, 80, 91, 55, 5, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'r', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | beginAtZero: true, 26 | ticks: { 27 | display: false 28 | }, 29 | pointLabels: { 30 | display: false 31 | } 32 | } 33 | }, 34 | plugins: { 35 | legend: { 36 | labels: { 37 | font: { 38 | size: 24 39 | } 40 | } 41 | } 42 | } 43 | } 44 | }, 45 | options: { 46 | spriteText: true 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearAndLegend.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegendDataIndex.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'polarArea', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [15, 59, 75, 29, 50, 72, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'r', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | beginAtZero: true, 26 | ticks: { 27 | display: false 28 | }, 29 | pointLabels: { 30 | display: false 31 | } 32 | } 33 | }, 34 | plugins: { 35 | legend: { 36 | labels: { 37 | font: { 38 | size: 24 39 | } 40 | } 41 | } 42 | } 43 | } 44 | }, 45 | options: { 46 | spriteText: true 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegendDataIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearAndLegendDataIndex.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegendDataIndexReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'polarArea', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [15, 59, 75, 29, 50, 72, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'r', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | beginAtZero: true, 26 | reverse: true, 27 | ticks: { 28 | display: false 29 | }, 30 | pointLabels: { 31 | display: false 32 | } 33 | } 34 | }, 35 | plugins: { 36 | legend: { 37 | labels: { 38 | font: { 39 | size: 24 40 | } 41 | } 42 | } 43 | } 44 | } 45 | }, 46 | options: { 47 | spriteText: true 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearAndLegendDataIndexReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearAndLegendDataIndexReverse.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearBorderColorAndLegendDataIndex.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'polarArea', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [15, 59, 75, 29, 50, 72, 40], 9 | gradient: { 10 | borderColor: { 11 | axis: 'r', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | beginAtZero: true, 26 | ticks: { 27 | display: false 28 | }, 29 | pointLabels: { 30 | display: false 31 | } 32 | } 33 | }, 34 | plugins: { 35 | legend: { 36 | labels: { 37 | font: { 38 | size: 24 39 | } 40 | } 41 | } 42 | } 43 | } 44 | }, 45 | options: { 46 | spriteText: true 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearBorderColorAndLegendDataIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearBorderColorAndLegendDataIndex.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearHovereBorderColorAndLegendDataIndex.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'polarArea', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [15, 59, 75, 29, 50, 72, 40], 9 | gradient: { 10 | hoverBorderColor: { 11 | axis: 'r', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | beginAtZero: true, 26 | ticks: { 27 | display: false 28 | }, 29 | pointLabels: { 30 | display: false 31 | } 32 | } 33 | }, 34 | plugins: { 35 | legend: { 36 | labels: { 37 | font: { 38 | size: 24 39 | } 40 | } 41 | }, 42 | tooltip: false 43 | } 44 | } 45 | }, 46 | options: { 47 | spriteText: true, 48 | async run(chart) { 49 | const meta = chart.getDatasetMeta(0); 50 | const el = meta.data[1]; 51 | await window.triggerMouseEvent(chart, 'mousemove', el.getCenterPoint()); 52 | } 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearHovereBorderColorAndLegendDataIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearHovereBorderColorAndLegendDataIndex.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearNegativeNegative.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, -29, -80, -51, -55, -30, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | 0: 'red', 13 | '-50': 'yellow', 14 | '-80': 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | r: { 23 | display: true, 24 | max: -25 25 | } 26 | }, 27 | plugins: { 28 | legend: false 29 | } 30 | } 31 | }, 32 | options: { 33 | spriteText: true 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearNegativeNegative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearNegativeNegative.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearNegativePositive.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, 29, -80, 51, -55, 30, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | '-80': 'green', 13 | '-50': 'yellow', 14 | 0: 'red', 15 | 50: 'green' 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | r: { 24 | display: true, 25 | } 26 | }, 27 | plugins: { 28 | legend: false 29 | } 30 | } 31 | }, 32 | options: { 33 | spriteText: true 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearNegativePositive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearNegativePositive.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearPositivePositive.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 51, 55, 30, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | r: { 23 | display: true, 24 | min: 25 25 | } 26 | }, 27 | plugins: { 28 | legend: false 29 | } 30 | } 31 | }, 32 | options: { 33 | spriteText: true 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearPositivePositive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearPositivePositive.png -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'radar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [0, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'r', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | r: { 23 | display: true, 24 | reverse: true, 25 | beginAtZero: true, 26 | ticks: { 27 | z: 100 28 | } 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/rRadialLinearReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/rRadialLinearReverse.png -------------------------------------------------------------------------------- /test/fixtures/wrongColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x', 11 | colors: { 12 | Jan: 'red', 13 | Apr: 'wrongColor', 14 | Jun: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | x: { 23 | display: false, 24 | }, 25 | y: { 26 | display: false, 27 | beginAtZero: true 28 | } 29 | }, 30 | plugins: { 31 | legend: false 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/wrongColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/wrongColor.png -------------------------------------------------------------------------------- /test/fixtures/wrongColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [65, 29, 80, 91, 55, 5, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'x', 12 | colors: { 13 | Jan: 'wrongColor1', 14 | Apr: 'wrongColor2', 15 | Jun: 'wrongColor3', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: true 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/wrongColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/wrongColors.png -------------------------------------------------------------------------------- /test/fixtures/wrongColorsConfig.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x', 11 | colors: true 12 | } 13 | } 14 | }], 15 | }, 16 | options: { 17 | scales: { 18 | x: { 19 | display: false, 20 | }, 21 | y: { 22 | display: false, 23 | beginAtZero: true 24 | } 25 | }, 26 | plugins: { 27 | legend: false 28 | } 29 | } 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /test/fixtures/wrongColorsConfig.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/wrongColorsConfig.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategory.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x', 11 | colors: { 12 | Jan: 'red', 13 | Apr: 'yellow', 14 | Jun: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | x: { 23 | display: false, 24 | }, 25 | y: { 26 | display: false, 27 | beginAtZero: true 28 | } 29 | }, 30 | plugins: { 31 | legend: false 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianCategory.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryAndLegend.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [65, 29, 80, 91, 55, 5, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'x', 12 | colors: { 13 | Jan: 'red', 14 | Apr: 'yellow', 15 | Jun: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: { 33 | labels: { 34 | font: { 35 | size: 24 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryAndLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianCategoryAndLegend.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryBorderColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | borderWidth: 4, 9 | gradient: { 10 | borderColor: { 11 | axis: 'x', 12 | colors: { 13 | Jan: 'red', 14 | Apr: 'yellow', 15 | Jun: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryBorderColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianCategoryBorderColor.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryBorderColorAndLegend.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [65, 29, 80, 91, 55, 5, 40], 9 | borderWidth: 4, 10 | gradient: { 11 | borderColor: { 12 | axis: 'x', 13 | colors: { 14 | Jan: 'red', 15 | Apr: 'yellow', 16 | Jun: 'green', 17 | } 18 | } 19 | } 20 | }], 21 | }, 22 | options: { 23 | scales: { 24 | x: { 25 | display: false, 26 | }, 27 | y: { 28 | display: false, 29 | beginAtZero: true 30 | } 31 | }, 32 | plugins: { 33 | legend: { 34 | labels: { 35 | font: { 36 | size: 24 37 | } 38 | } 39 | } 40 | } 41 | } 42 | }, 43 | options: { 44 | spriteText: true 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryBorderColorAndLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianCategoryBorderColorAndLegend.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryByIndex.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x', 11 | colors: { 12 | 0: 'red', 13 | 2.5: 'pink', 14 | 4.5: 'yellow', 15 | 6: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: true, 25 | ticks: { 26 | display: false 27 | } 28 | }, 29 | y: { 30 | display: false, 31 | beginAtZero: true 32 | } 33 | }, 34 | plugins: { 35 | legend: false 36 | } 37 | } 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianCategoryByIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianCategoryByIndex.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianLinear.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'x', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | indexAxis: 'y', 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | } 29 | }, 30 | plugins: { 31 | legend: false 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianLinear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianLinear.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianTime.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [ 7 | {x: 1648418400000, y: 24}, 8 | {x: 1648504800000, y: 52}, 9 | {x: 1648591200000, y: 79}, 10 | {x: 1648677600000, y: 32}, 11 | {x: 1648764000000, y: 16}, 12 | {x: 1648850400000, y: 69}, 13 | {x: 1648936800000, y: 95}, 14 | ], 15 | fill: true, 16 | gradient: { 17 | backgroundColor: { 18 | axis: 'x', 19 | colors: { 20 | 1648418400000: 'red', 21 | 1648677600000: 'yellow', 22 | 1648936800000: 'green', 23 | } 24 | } 25 | } 26 | }], 27 | }, 28 | options: { 29 | scales: { 30 | x: { 31 | type: 'time', 32 | display: true, 33 | adapters: { 34 | date: { 35 | locale: 'en-US', 36 | setZone: true, 37 | zone: 'Europe/Rome' 38 | } 39 | }, 40 | time: { 41 | unit: 'day', 42 | parser: 'dd/MM/yyyy' 43 | }, 44 | }, 45 | y: { 46 | display: false, 47 | beginAtZero: true 48 | } 49 | }, 50 | plugins: { 51 | legend: false 52 | } 53 | } 54 | }, 55 | options: { 56 | spriteText: true 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianTime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianTime.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianTimeParsing.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [ 7 | {x: '28/03/2022', y: 24}, 8 | {x: '29/03/2022', y: 52}, 9 | {x: '30/03/2022', y: 79}, 10 | {x: '31/03/2022', y: 32}, 11 | {x: '01/04/2022', y: 16}, 12 | {x: '02/04/2022', y: 69}, 13 | {x: '03/04/2022', y: 95}, 14 | ], 15 | fill: true, 16 | gradient: { 17 | backgroundColor: { 18 | axis: 'x', 19 | colors: { 20 | '28/03/2022': 'red', 21 | '31/03/2022': 'yellow', 22 | '03/04/2022': 'green', 23 | } 24 | } 25 | } 26 | }], 27 | }, 28 | options: { 29 | scales: { 30 | x: { 31 | type: 'time', 32 | display: true, 33 | adapters: { 34 | date: { 35 | locale: 'en-US', 36 | setZone: true, 37 | zone: 'Europe/Rome' 38 | } 39 | }, 40 | time: { 41 | unit: 'day', 42 | parser: 'dd/MM/yyyy' 43 | }, 44 | }, 45 | y: { 46 | display: false, 47 | beginAtZero: true 48 | } 49 | }, 50 | plugins: { 51 | legend: false 52 | } 53 | } 54 | }, 55 | options: { 56 | spriteText: true 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianTimeParsing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianTimeParsing.png -------------------------------------------------------------------------------- /test/fixtures/xCartesianTimeParsingOnColors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | datasets: [{ 6 | data: [ 7 | {x: 1648418400000, y: 24}, 8 | {x: 1648504800000, y: 52}, 9 | {x: 1648591200000, y: 79}, 10 | {x: 1648677600000, y: 32}, 11 | {x: 1648764000000, y: 16}, 12 | {x: 1648850400000, y: 69}, 13 | {x: 1648936800000, y: 95}, 14 | ], 15 | fill: true, 16 | gradient: { 17 | backgroundColor: { 18 | axis: 'x', 19 | colors: { 20 | '28/03/2022': 'red', 21 | '31/03/2022': 'yellow', 22 | '03/04/2022': 'green', 23 | } 24 | } 25 | } 26 | }], 27 | }, 28 | options: { 29 | scales: { 30 | x: { 31 | type: 'time', 32 | display: true, 33 | adapters: { 34 | date: { 35 | locale: 'en-US', 36 | setZone: true, 37 | zone: 'Europe/Rome' 38 | } 39 | }, 40 | time: { 41 | unit: 'day', 42 | parser: 'dd/MM/yyyy' 43 | }, 44 | }, 45 | y: { 46 | display: false, 47 | beginAtZero: true 48 | } 49 | }, 50 | plugins: { 51 | legend: false 52 | } 53 | } 54 | }, 55 | options: { 56 | spriteText: true 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /test/fixtures/xCartesianTimeParsingOnColors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/xCartesianTimeParsingOnColors.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinear.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | x: { 23 | display: false, 24 | }, 25 | y: { 26 | display: false, 27 | beginAtZero: true 28 | } 29 | }, 30 | plugins: { 31 | legend: false 32 | } 33 | } 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinear.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinear0Negative.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, -29, -80, -10, -55, 0, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | 0: 'red', 13 | '-50': 'yellow', 14 | '-80': 'green', 15 | } 16 | } 17 | } 18 | }, 19 | { 20 | data: [-65, -29, -80, -10, -55, 0, -40], 21 | gradient: { 22 | backgroundColor: { 23 | axis: 'y', 24 | colors: { 25 | 0: 'red', 26 | 50: 'yellow', 27 | 80: 'green', 28 | } 29 | } 30 | } 31 | }], 32 | }, 33 | options: { 34 | scales: { 35 | x: { 36 | display: false, 37 | }, 38 | y: { 39 | display: false, 40 | } 41 | }, 42 | plugins: { 43 | legend: false 44 | } 45 | } 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinear0Negative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinear0Negative.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearAndLegend.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | label: 'legend', 8 | data: [65, 29, 80, 91, 55, 5, 40], 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: { 33 | labels: { 34 | font: { 35 | size: 24 36 | } 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | options: { 43 | spriteText: true 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearAndLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearAndLegend.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearBorderColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | borderWidth: 4, 9 | gradient: { 10 | borderColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: false, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearBorderColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearBorderColor.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearLineColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | borderWidth: 4, 9 | gradient: { 10 | borderColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: true, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearLineColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearLineColor.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearLineColorReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | borderWidth: 4, 9 | gradient: { 10 | borderColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | display: true, 28 | reverse: true, 29 | beginAtZero: true 30 | } 31 | }, 32 | plugins: { 33 | legend: false 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearLineColorReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearLineColorReverse.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearNegativeNegative.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, -29, -80, -51, -55, -30, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | '-80': 'green', 13 | '-50': 'yellow', 14 | 0: 'red', 15 | 50: 'yellow', 16 | 80: 'green', 17 | } 18 | } 19 | } 20 | }], 21 | }, 22 | options: { 23 | scales: { 24 | x: { 25 | display: false, 26 | }, 27 | y: { 28 | display: true, 29 | max: -25 30 | } 31 | }, 32 | plugins: { 33 | legend: false 34 | } 35 | } 36 | }, 37 | options: { 38 | spriteText: true 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearNegativeNegative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearNegativeNegative.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearNegativePositive.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [-65, 29, -80, 51, -55, 30, -40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | '-80': 'green', 13 | '-50': 'yellow', 14 | 0: 'red', 15 | 50: 'yellow', 16 | 80: 'green', 17 | } 18 | } 19 | } 20 | }], 21 | }, 22 | options: { 23 | scales: { 24 | x: { 25 | display: false, 26 | }, 27 | y: { 28 | display: true, 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | }, 36 | options: { 37 | spriteText: true 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearNegativePositive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearNegativePositive.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearPointBorderColor.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | borderWidth: 2, 9 | pointRadius: 10, 10 | gradient: { 11 | pointBorderColor: { 12 | axis: 'y', 13 | colors: { 14 | 0: 'red', 15 | 50: 'yellow', 16 | 80: 'green', 17 | } 18 | } 19 | } 20 | }], 21 | }, 22 | options: { 23 | scales: { 24 | x: { 25 | display: false, 26 | }, 27 | y: { 28 | display: false, 29 | beginAtZero: true 30 | } 31 | }, 32 | plugins: { 33 | legend: { 34 | labels: { 35 | font: { 36 | size: 24 37 | } 38 | } 39 | } 40 | } 41 | } 42 | }, 43 | options: { 44 | spriteText: true 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearPointBorderColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearPointBorderColor.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearPositivePositive.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 51, 55, 30, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | x: { 23 | display: false, 24 | }, 25 | y: { 26 | display: true, 27 | min: 25 28 | } 29 | }, 30 | plugins: { 31 | legend: false 32 | } 33 | } 34 | }, 35 | options: { 36 | spriteText: true 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearPositivePositive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearPositivePositive.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearReverse.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'bar', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | gradient: { 9 | backgroundColor: { 10 | axis: 'y', 11 | colors: { 12 | 0: 'red', 13 | 50: 'yellow', 14 | 80: 'green', 15 | } 16 | } 17 | } 18 | }], 19 | }, 20 | options: { 21 | scales: { 22 | x: { 23 | display: false, 24 | }, 25 | y: { 26 | display: false, 27 | reverse: true, 28 | beginAtZero: true 29 | } 30 | }, 31 | plugins: { 32 | legend: false 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearReverse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearReverse.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearStacked.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [65, 29, 80, 91, 55, 5, 40], 8 | fill: true, 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 50: 'yellow', 15 | 80: 'green', 16 | } 17 | } 18 | } 19 | }], 20 | }, 21 | options: { 22 | scales: { 23 | x: { 24 | display: false, 25 | }, 26 | y: { 27 | type: 'linear', 28 | display: true, 29 | beginAtZero: true, 30 | stack: 'demo', 31 | stackWeight: 2 32 | }, 33 | y2: { 34 | type: 'category', 35 | labels: ['ON', 'OFF'], 36 | offset: true, 37 | position: 'left', 38 | stack: 'demo', 39 | stackWeight: 1 40 | } 41 | }, 42 | plugins: { 43 | legend: false 44 | } 45 | } 46 | }, 47 | options: { 48 | spriteText: true 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLinearStacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLinearStacked.png -------------------------------------------------------------------------------- /test/fixtures/yCartesianLogarithmic.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | config: { 3 | type: 'line', 4 | data: { 5 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 6 | datasets: [{ 7 | data: [80000, 100, 8000, 20, 700000, 10000, 1000000], 8 | fill: true, 9 | gradient: { 10 | backgroundColor: { 11 | axis: 'y', 12 | colors: { 13 | 0: 'red', 14 | 100: 'blue', 15 | 1000: 'yellow', 16 | 10000: 'green', 17 | } 18 | } 19 | } 20 | }], 21 | }, 22 | options: { 23 | scales: { 24 | x: { 25 | display: false, 26 | }, 27 | y: { 28 | type: 'logarithmic', 29 | display: true 30 | } 31 | }, 32 | plugins: { 33 | legend: { 34 | display: false, 35 | } 36 | } 37 | } 38 | }, 39 | options: { 40 | spriteText: true 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /test/fixtures/yCartesianLogarithmic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kurkle/chartjs-plugin-gradient/368df8fd8850c1984fa0fce09cc8f35c3a227222/test/fixtures/yCartesianLogarithmic.png -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent} from 'chartjs-test-utils'; 2 | 3 | window.devicePixelRatio = 1; 4 | window.acquireChart = acquireChart; 5 | window.triggerMouseEvent = triggerMouseEvent; 6 | 7 | jasmine.fixtures = specsFromFixtures; 8 | 9 | beforeAll(function() { 10 | Chart.register(window['chartjs-plugin-gradient']); 11 | // Disable colors plugin for tests. 12 | Chart.defaults.plugins.colors.enabled = false; 13 | }); 14 | 15 | beforeEach(function() { 16 | addMatchers(); 17 | }); 18 | 19 | afterEach(function() { 20 | releaseCharts(); 21 | }); 22 | 23 | console.warn('Testing with chart.js v' + Chart.version); 24 | -------------------------------------------------------------------------------- /test/specs/gradient.spec.js: -------------------------------------------------------------------------------- 1 | describe('Gradient plugin', function() { 2 | 3 | describe('auto', jasmine.fixtures('.')); 4 | 5 | it('should emit console warning when unknown axis type is used', function() { 6 | const origWarn = console.warn; 7 | console.warn = jasmine.createSpy('warn'); 8 | 9 | acquireChart({ 10 | type: 'bar', 11 | data: { 12 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], 13 | datasets: [{ 14 | data: [65, 29, 80, 91, 55, 5, 40], 15 | gradient: { 16 | backgroundColor: { 17 | axis: 's', 18 | colors: { 19 | Jan: 'red', 20 | Apr: 'yellow', 21 | Jun: 'green', 22 | } 23 | } 24 | } 25 | }], 26 | } 27 | }); 28 | 29 | expect(console.warn).toHaveBeenCalledWith({ 30 | asymmetricMatch: function(compareTo) { 31 | return compareTo.startsWith('Scale not found for \'s\'-axis in datasets[0] of chart id'); 32 | } 33 | }); 34 | 35 | console.warn = origWarn; 36 | }); 37 | 38 | 39 | }); 40 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import {ChartType, Plugin} from 'chart.js'; 2 | import {Options} from './options'; 3 | 4 | declare module 'chart.js' { 5 | interface ChartDatasetProperties { 6 | /** 7 | * Per dataset datalabels plugin options. 8 | * @since 0.5.0 9 | */ 10 | gradient?: Options; 11 | } 12 | } 13 | 14 | declare const plugin: Plugin; 15 | 16 | export default plugin; 17 | -------------------------------------------------------------------------------- /types/options.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The specification of the color gradient from 0 to 100 with as many steps in between as needed. 3 | * 4 | * @example gradient from red to green. 5 | * { 6 | * 0: 'red', 7 | * 50: 'yellow', 8 | * 100: 'green' 9 | * } 10 | * 11 | * @example gradient transitioning through the opacity of a color. 12 | * { 13 | * 100: "rgb(187, 184, 184)", 14 | * 80: "rgba(187, 184, 184, 0.58)", 15 | * 20: "rgba(187, 184, 184, 0.34)", 16 | * 0: "rgba(187, 184, 184, 0.18)", 17 | * } 18 | * 19 | * @since 0.5.0 20 | */ 21 | interface Gradient { 22 | [key: number]: string 23 | } 24 | 25 | /** 26 | * The color specification of either the x or the y axis further described within the colors property. 27 | * 28 | * @since 0.5.0 29 | */ 30 | interface ColorSpecification { 31 | axis: 'x' | 'y' 32 | colors: Gradient 33 | } 34 | 35 | export interface Options { 36 | backgroundColor?: ColorSpecification 37 | borderColor?: ColorSpecification 38 | } 39 | --------------------------------------------------------------------------------