Chart js. How to align text by the center of the tooltip?

Question

bodyAlign and titleAlign don't work, maybe somebody knows how to align text by the center of tooltip?

https://jsfiddle.net/Dima1501/m7s43hrs/2900/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
      ],
      borderColor: [
      ],
      borderWidth: 1
    }]
  },
 options: {
    tooltips: {
    yAlign: 'bottom',
            xAlign: 'center',
    xPadding: 25,
            yPadding: 15,
      xPadding: 45,
      titleAlign: 'center',
            footerAlign: 'center',
            bodyAlign: 'center',
  callbacks: {
  },
  backgroundColor: '#ccc',
  titleFontSize: 16,
  titleFontColor: '#0066ff',
  bodyFontColor: '#000',
  bodyFontSize: 14,
  displayColors: false
   }
  }
});

Answer 1

You are using 2.5.0, which has bug. Update to latest 2.8.0, its working fine already. https://jsfiddle.net/zhuhang95/utc9wenx/4/

Usually, using titleAlign and bodyAlign should do the trick.

Chart.js docs: https://www.chartjs.org/docs/latest/configuration/tooltip.html#alignment

        options: {
            tooltips: {
                titleAlign: 'center',
                bodyAlign: 'center'
            }
        }

Answer 2

Your align properties were messing things up. Give this a try:

https://jsfiddle.net/m7s43hrs/2951/