Rendering issues when rendering a chartjs-chart-matrix

Question

Hi I'm trying to use the chart matrix library mentioned in one of my react projects. I cant seem to get the chart to render the data on initial load but it renders correctly when i force a typescript error and undo the change (on my local machine at least. it doesnt happen in the sandbox).

Similar code works for my candlestick chart using chartjs-financial. See the codesandbox for implementation. I have duplicated the typedCharts.tsx to get the chart to work.

Answer 1

There is a wrong chart configuration.

The scales are defined inside the "plugins" node and that's not correct.

Move the scales in the chart options:

  const options = {
    responsive: true,
    scales: {
      x: {
        type: "category",
        labels: ["apple", "banana", "coconut"],
        ticks: {
          display: true
        },
        grid: {
          display: false
        }
      },
      y: {
        type: "category",
        labels: ["fruit", "juice", "smoothie"],
        offset: true,
        ticks: {
          display: true
        },
        grid: {
          display: false
        }
      }
    },
  plugins: {
      title: {
        display: true,
        text: "fruits"
      },
    }
  };