1 thought on “pie chart center text not centered” 

  1. import { Doughnut } from 'vue-chartjs'

export default Doughnut.extend({
  props: ['data'],
  mounted () {
    this.renderChart({
      labels: ['Completed', 'Remaining'],
      legend: {
        display: false
      },
      datasets: [
        {
          backgroundColor: ['#1BA2d4', 'lightgrey'],
          data: [this.data, 100 - this.data]
        }
      ]
    }, {
      responsive: true,
      maintainAspectRatio: false,
      cutoutPercentage: 90,
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
        // custom: function (tooltipModel) {
        //   // Tooltip Element
        //   // console.log('tm', tooltipModel)
        //   var tooltipEl = document.getElementById('chartjs-tooltip')
        //   console.log(tooltipEl)
        //   console.log('d', document)
        //   // tooltipEl.onClick(console.log('it worked'))
        // }
      },
      hover: {
        mode: false
      },
      // onClick: clickEvent,
      animation: {
        duration: 500,
        onProgress: function (animation) {
          var chartContext = this.chart.canvas.getContext('2d', {alpha: false})
          chartContext.fillStyle = '#4a4a4a'
          chartContext.font = '100 36px Rubik'
          chartContext.textBaseline = 'middle'
          chartContext.fillText(Math.round(this.data.datasets[0].data[0]) + '%%', this.chart.width / 2 - 30, this.chart.height / 2, 200)
        },
        onComplete: function (animation) {
          var chartContext = this.chart.canvas.getContext('2d', {alpha: false})
          chartContext.fillStyle = '#4a4a4a'
          chartContext.font = '100 36px Rubik'
          chartContext.textBaseline = 'middle'
          chartContext.fillText(Math.round(this.data.datasets[0].data[0]) + '%%', this.chart.width / 2 - 30, this.chart.height / 2, 200)
        }
      }
    })
  }
})

    that’s the component that is making the chart. thanks for responding @etimberg

Comments are closed.