Write custom plugin that uses other plugin

[rick20]

In my case, I would like to write a custom waterfall chart plugin.
I can already simulate it using the annotation plugin.
Now I want to wrap the whole logic into a custom plugin, so all I need to use it is just simply passing the values for each bar (without needing to pass [minValue, maxValue] like in typical floating bar)
How can I achieve this?

[manimovassagh]

You can absolutely build a custom plugin that internally uses chartjs-plugin-annotation. The key is to programmatically generate the annotation config in your plugin hooks, so the user just passes simple values.

Here is the approach:

import annotationPlugin from "chartjs-plugin-annotation";
import { Chart } from "chart.js";

// Make sure annotation plugin is registered
Chart.register(annotationPlugin);

const waterfallPlugin = {
  id: "waterfall",

  beforeInit(chart) {
    const waterfallOpts = chart.options.plugins.waterfall;
    if (!waterfallOpts) return;

    // Convert simple values into floating bar data + annotations
    const values = waterfallOpts.values; // e.g. [100, -20, 30, -10, 50]
    const labels = waterfallOpts.labels;

    let cumulative = 0;
    const floatingData = [];
    const annotations = {};

    values.forEach((val, i) => {
      const start = cumulative;
      cumulative += val;
      floatingData.push([Math.min(start, cumulative), Math.max(start, cumulative)]);

      // Add connector line annotation between bars
      if (i < values.length - 1) {
        annotations[`connector-${i}`] = {
          type: "line",
          xMin: i + 0.4,
          xMax: i + 0.6,
          yMin: cumulative,
          yMax: cumulative,
          borderColor: "grey",
          borderWidth: 1,
          borderDash: [4, 4],
        };
      }
    });

    // Inject computed data into chart config
    chart.data.datasets[0].data = floatingData;
    chart.data.labels = labels;

    // Merge annotations into existing annotation config
    chart.options.plugins.annotation = chart.options.plugins.annotation || {};
    chart.options.plugins.annotation.annotations = {
      ...chart.options.plugins.annotation.annotations,
      ...annotations,
    };
  },
};

Chart.register(waterfallPlugin);

Then usage becomes:

new Chart(ctx, {
  type: "bar",
  data: { datasets: [{ backgroundColor: ["green", "red", "green", "red", "green"] }] },
  options: {
    plugins: {
      waterfall: {
        values: [100, -20, 30, -10, 50],
        labels: ["Start", "Loss", "Gain", "Loss", "Gain"],
      },
    },
  },
});

The trick is to use beforeInit so the annotation plugin sees the generated config before it processes. You could also use beforeUpdate if you need to react to data changes dynamically.

One thing to watch: make sure your plugin is registered after the annotation plugin, or use beforeInit which fires early enough that the annotation plugin picks up the injected config during its own init cycle.