ChartOptions and Typescript

[peterbe]

Right. Hmm?

What type should I import and use to create my options object to make the Typescript woes go away?

I know this sounds more like a question than bug/feature request, but there is very little help in the docs about how to use options in typescript.

[dangreen]

@peterbe Hi. You are using options for chart.js@v2, while using chart.js@v3. Options for v3 should look like this:

const options = {
  scales: {
    y: {
      beginAtZero: true,
    },
  },
};

[peterbe]

@peterbe Hi. You are using options for chart.js@v2, while using chart.js@v3. Options for v3 should look like this:

const options = {
  scales: {
    y: {
      beginAtZero: true,
    },
  },
};

That could be it! I might have copied and pasted something from a Stackoverflow post or some old docs.
I still wish there was some better guidance.

[usahai]

Hello, would it be possible to get some help with this? I got a similar issue:

  const options = {
    responsive: true,
    resizeDelay: 500,
    plugins: {
      title: {
        display: false,
      },
      legend: {
        display: false,
      },
      tooltip: {
        xAlign: 'center',
        yAlign: 'bottom',
        backgroundColor: '#000000',
        displayColors: false,
        bodyAlign: 'center',
        callbacks: {
          beforeBody: (context) => {
            console.log('before body: ', context)
            return 'before body'
          },
          title: (context) => {
            console.log('title context: ', context)
            return 'title'
          },
          beforeLabel: (context) => {
            console.log('before label: ', context)
            return 'before label'
          },
          label: (context) => {
            console.log('label context', context)
            return 'label'
          },
        },
      },
    },
    scales: {
      y: {
        display: false,
      },
    },
  }

And am calling the the function:

<Bar data={chartData} options={options} />

As far as I can tell, I am using all the v3 options. It seems that it is unable to accept 'center' as a valid option for xAlign

[dangreen]

@usahai Hi. Please use as const with align props:

xAlign: 'center' as const,
yAlign: 'bottom' as const,
bodyAlign: 'center' as const,

[dangreen]

Resolved