Derived Chart Type

config setup

const config = {
  type: 'derivedBubble',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Derived Chart Type'
      },
    }
  }
};

const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, rmin: 1, rmax: 20};
const data = {
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderColor: Utils.CHART_COLORS.blue,
      borderWidth: 1,
      boxStrokeStyle: 'red',
      data: Utils.bubbles(NUMBER_CFG)
    }
  ],
};

DerivedBubble Implementation

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

Docs

• Bubble Chart
• New Charts