[Bug]: type issue with options.plugins.legend.position and options.plugins.legend.align

[zodwick]

Would you like to work on a fix?

• [X] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Issue Title: Unable to Assign 'position' Property in Chart.js Options

Issue Description:

When attempting to add the 'position' property as per the Chart.js documentation, it successfully produces the desired output. However, it results in a type error in the options object when passing it to the Bar component from react-chartjs-2.

Code:

const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      grid: {
        drawBorder: false,
        color: "#E5E5E5",
        borderDash: [12, 10],
        display: true,
      },
      border: {
        display: false,
        dash: [8, 4],
      },
    },
    x: {
      grid: {
        display: false,
      },
      border: {
        display: false,
        dash: [8, 4],
      },
    },
  },
  plugins: {
    tooltip: {
      enabled: true,
      backgroundColor: "rgb(255, 255, 255)",
      titleColor: "rgb(0, 0, 0)",
      bodyColor: "rgb(0, 0, 0)",
      displayColors: true,
      padding: 5,
    },
    legend: {
      labels: {
        usePointStyle: true,
        padding: 20,
      },
      position: "bottom", // source of the error
    },
  },
};

export default function BarChart_mob() {
  return <Bar data={data} options={options} className='' />;
}

Error Message:

Type '{ responsive: boolean; maintainAspectRatio: boolean; scales: { y: { ... }; x: { ... }; }; plugins: { ...; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<"bar"> & ElementChartOptions<"bar"> & PluginChartOptions<"bar"> & DatasetChartOptions<"bar"> & ScaleChartOptions<...> & BarControllerChartOptions>'.
The types of 'plugins.legend.position' are incompatible between these types.
Type 'string' is not assignable to type '"bottom" | "center" | "left" | "top" | "right" | "chartArea" | _DeepPartialObject<{ [scaleId: string]: number; }> | undefined'.ts(2322)

Notes:

• The issue seems to be related to conflicting types for the 'position' property within the plugins.legend object.
• The error message suggests that 'position' is expected to be of type "bottom" | "center" | "left" | "top" | "right" but is being assigned a string value.
• This might be related to custom type definitions for these values.

Expected Behavior:

The code should allow the 'position' property to be set in the plugins.legend object without type errors, in accordance with the Chart.js documentation.

Reproduction

running the above code to create a sample react app in nextjs with ts reproduces the issue.

chart.js version

4.4.0

react-chartjs-2 version

5.2.0

Possible solution

const options = {
  // ... (other options)
  plugins: {
    tooltip: {
      // ... (other tooltip options)
    },
    legend: {
      labels: {
        usePointStyle: true,
        padding: 20,
      },
      position: "bottom" as "bottom", // Type assertion to specify the type
      align: "end" as "end", //Type assertion to specify the type
    },
  },
};

this works . so I am guessing that instead of a string, "bottom","end" ..etc are defined as types of their own . correcting the type definitions will be enough (i think ) . I'd be happy to do the same with some guidance (kinda new to this ) thanks :)

[throwaway34059]

Another work around we have is It's not much different. Just another option of the same thing.

const options = {
  // ... (other options)
  plugins: {
    tooltip: {
      // ... (other tooltip options)
    },
    legend: {
     ...
      position: "bottom" as const, 
      align: "end" as const, 
    },
  },
};

[seulgi-i]

hi, how about this way,

import type { ChartOptions } from 'chart.js' const options: ChartOptions = { ... }

[igords-goncalves]

How about this?

const options: any = {
  plugins: {
    legend: {
      position: "right",
    },
  },
};