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.