Chartjs-Age pyramid chart using chart.js

I ran up against the same problems as you, and managed to fix it using React ChartJS’ HorizontalBarChart: but only one 😉

Try stacking the yAxis and adding two datasets, using the options property

const populationPyramidOptions = {
scales: {
    yAxes: [{
        stacked: true
    }],
    xAxes: [{
        stacked: false
    }]
}


<HorizontalBar data={chartData} options={populationPyramidOptions} />

You can get a pretty good result:

if you use directly chartjs check about the solution here:
https://github.com/nknganda/pyramid_chart_example

The syntax for the options is not compatible with chartjs > 3.x

Below the updated code:

options = {
  plugins: {
    tooltip: {
      intersect: true,
      callbacks: {
        label: function(context) {
          var label = context.dataset.label || '';
          var value = context.formattedValue;
          var positiveOnly = value < 0 ? -value : value;
          if (label) {
              label += ': ';
          }
          if (context.parsed.y !== null) {
              label += positiveOnly
          }
          return label;
        },
      },
     },
    legend: {
      position: "bottom",
    },
  },
  responsive: true,
  scales: {
     x: {
      stacked: false,
      ticks: {
        beginAtZero: true,
        callback: (v) => {
          return v < 0 ? -v : v;
        },
      },
     },
    y: {
       stacked: true,
      ticks: {
        beginAtZero: true,
      },
      position: "left",
    },
   },
   indexAxis: 'y'
 }

Note that tooltips is now tooltip and inside plugins, alongside with legend.

xAxies and yAxies are x and y and no more a list.
You may find more in the official chartjs doc.

Dataset don’t change as you only need to make your values negative.