mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
66ee0fecaf
* Generate API docs with vuepress-plugin-typedoc * Links, fixes, cleanup * Convert bar samples to Vuepress * Some line chart samples moved over * Fix lint issues * Derived axis type sample * LineAreaStacked chart created in vuepress * added radar area axample * Line dataset added sample * final area example added * Add derived-chart-type * Bar scriptable sample * Scriptable samples * Clean lint errors * added linear axis samples to vuepress * change tab to spaces to fix lint error * Convert the rest of the scale samples * Scale option samples * Fix typo * Fixes * Legend samples * Title samples * Change the title of the tip block to Note (#8758) * Convert bar samples to Vuepress * Some line chart samples moved over * Fix lint issues * Derived axis type sample * LineAreaStacked chart created in vuepress * added radar area axample * Line dataset added sample * final area example added * Add derived-chart-type * Bar scriptable sample * Scriptable samples * Clean lint errors * added linear axis samples to vuepress * change tab to spaces to fix lint error * Convert the rest of the scale samples * Scale option samples * Fix typo * Fixes * Legend samples * Advanced samples * Remove extra section * Animation samples * Hide legend from progressive line * Add a comment on what `from` does * Tooltip samples * Ädd other charts to vuepress samples * enable plugin again since all samples have been converted * fix skip radar example, middle skip was not calculated correctly * lint error * Progressive-line: add 2nd line * Fix lint errors Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com> Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com> Co-authored-by: Jacco van den Berg <39033624+LeeLenaleee@users.noreply.github.com>
35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import {Chart, BubbleController} from 'chart.js';
|
|
|
|
class Custom extends BubbleController {
|
|
draw() {
|
|
// Call bubble controller method to draw all the points
|
|
super.draw(arguments);
|
|
|
|
// Now we can do some custom drawing for this dataset.
|
|
// Here we'll draw a box around the first point in each dataset,
|
|
// using `boxStrokeStyle` dataset option for color
|
|
var meta = this.getMeta();
|
|
var pt0 = meta.data[0];
|
|
|
|
const {x, y} = pt0.getProps(['x', 'y']);
|
|
const {radius} = pt0.options;
|
|
|
|
var ctx = this.chart.ctx;
|
|
ctx.save();
|
|
ctx.strokeStyle = this.options.boxStrokeStyle;
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(x - radius, y - radius, 2 * radius, 2 * radius);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
Custom.id = 'derivedBubble';
|
|
Custom.defaults = {
|
|
// Custom defaults. Bubble defaults are inherited.
|
|
boxStrokeStyle: 'red'
|
|
};
|
|
// Overrides are only inherited, but not merged if defined
|
|
// Custom.overrides = Chart.overrides.bubble;
|
|
|
|
// Stores the controller so that the chart initialization routine can look it up
|
|
Chart.register(Custom);
|