move option to correct namespace (#10613)

* move option to correct namespace

* change plugin name from snake_case to camelCase
This commit is contained in:
Jacco van den Berg 2022-08-22 22:44:04 +02:00 committed by GitHub
parent b0a06d1652
commit 432d1e6a60
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 4 deletions

View File

@ -33,7 +33,7 @@ const data = {
// <block:plugin:2> // <block:plugin:2>
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update(). // Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const plugin = { const plugin = {
id: 'custom_canvas_background_color', id: 'customCanvasBackgroundColor',
beforeDraw: (chart, args, options) => { beforeDraw: (chart, args, options) => {
const {ctx} = chart; const {ctx} = chart;
ctx.save(); ctx.save();
@ -51,7 +51,9 @@ const config = {
data: data, data: data,
options: { options: {
plugins: { plugins: {
color: 'lightGreen', customCanvasBackgroundColor: {
color: 'lightGreen',
}
} }
}, },
plugins: [plugin], plugins: [plugin],
@ -95,7 +97,7 @@ const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg'; image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
const plugin = { const plugin = {
id: 'custom_canvas_background_image', id: 'customCanvasBackgroundImage',
beforeDraw: (chart) => { beforeDraw: (chart) => {
if (image.complete) { if (image.complete) {
const ctx = chart.ctx; const ctx = chart.ctx;

View File

@ -195,7 +195,7 @@ import {ChartType, Plugin} from 'chart.js';
declare module 'chart.js' { declare module 'chart.js' {
interface PluginOptionsByType<TType extends ChartType> { interface PluginOptionsByType<TType extends ChartType> {
custom_canvas_background_color?: { customCanvasBackgroundColor?: {
color?: string color?: string
} }
} }