Quick question:

I’m using ChartJS with react-chart-js2 and typescript.

I wanted to increase padding between legend and chart, and got to a solution that works, but I can’t seem to get the types right.

The solution: add the following code to plugins prop in JSX, or to ChartJS register method.

In both situations I get error:

Property ‘fit’ does not exist on type ‘LegendElement<“bar”>’.

(this appears when I hover over the .fit in the below code)

The code:

            plugins={[
              {
                id: "customSpacingLegend",
                beforeInit(chart) {
                  const originalFit = chart?.legend?.fit;

                  // Override the fit function
                  chart?.legend.fit = function fit() {
                    originalFit.bind(chart.legend)();
                    this?.height += 50;
                  };
                },
              },
            ]}

does anybody know maybe what’s this about? the code works, but the types seem to not work, I don’t know why, the TypeScript seems to justifiably complain about fit not existing, as it is not in the LegendElement spec https://www.chartjs.org/docs/latest/api/interfaces/LegendElement.html, but then again why does this work? Is the type of chart.legend actually different then the suggested LegendElement?