图表js。 如何通过工具提示的中心对齐文本？

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/