Search code examples
javascriptchart.jsreact-chartjs-2

ChartJS x axis title not visible when axis position is centered


When position is not centered, the title is visible. not centered x-axis

But the title disappears, if the x-axis position is centered. position center

Here is my Chartjs options.The documentation doesn't seem to have viable options to address this issue.

const options = {
    maintainAspectRatio: false,

    scales: {
      x: {
        type: 'linear',
        min: 0,
        max: MAX_AGE,
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: 'xaxis title',
        },
        position: 'center', // what can I do to view the x-axis tile when axis is centered.
      },
      y: {
        min: -10,
        max: 10,
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: 'yaxis title',
        },
      },
    },
}

Solution

  • I assume you are using a version of chart.js lower as 3.5 since this was a bug that has been resolved in the 3.5 release with this pr: https://github.com/chartjs/Chart.js/pull/9413

    So to resolve your issue you will need to update to the latest version of chart.js