updated: function () {
this.$nextTick(function () {
  Chart.pluginService.register({
  beforeDraw: function (chart) {
      if (chart.config.options.elements.center) {
        var ctx = chart.chart.ctx;

        var centerConfig = chart.config.options.elements.center;
        var fontStyle = centerConfig.fontStyle || 'Arial';
        var txt = centerConfig.text;
        var color = centerConfig.color || '#000';
        var sidePadding = centerConfig.sidePadding || 20;
        var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
        ctx.font = "40px " + fontStyle;

        var stringWidth = ctx.measureText(txt).width;
        var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

        var widthRatio = elementWidth / stringWidth;
        var newFontSize = Math.floor(30 * widthRatio);
        var elementHeight = (chart.innerRadius * 2);

        var fontSizeToUse = Math.min(newFontSize, elementHeight);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
        var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
        ctx.font = fontSizeToUse+"px " + fontStyle;
        ctx.fillStyle = color;

        ctx.fillText(txt, centerX, centerY);
      }
    }
  });
  new Chart(document.getElementById("bar-chart"), {
        type: 'doughnut',
            data: {
              labels: [
                this.funds[0] ? this.funds[0].name : '',
                this.funds[1] ? this.funds[1].name : '',
                "Text1", "Text2", "Text3"],
              datasets: [
                {
                  label: "Population (millions)",
                  backgroundColor: ["#4285F6", "#B80ADE","#FF675F","#1BC326","#A7A7A7","#494949","#E86522","#F19D3F"],
                  data: [
                  this.funds[0] ? this.funds[0].value : '',
                  this.funds[1] ? this.funds[1].value : '', 734,784,433],
                  hoverBorderColor: ["#4285F6", "#B80ADE","#FF675F","#1BC326","#A7A7A7","#494949","#E86522","#F19D3F"],
                  hoverBorderWidth: 6,
                  hoverBackgroundColor: ["#4285F6", "#B80ADE","#FF675F","#1BC326","#A7A7A7","#494949","#E86522","#F19D3F"],
                }
              ],
            },
            options: {
              cutoutPercentage: 65,
               tooltips: {
                  callbacks: {
                    label: function labelPercantage(tooltipItem, data) {
                      var dataset = data.datasets[tooltipItem.datasetIndex];
                      var meta = dataset._meta[Object.keys(dataset._meta)[0]];
                      var total = meta.total;
                      var currentValue = dataset.data[tooltipItem.index];
                      var percentage = parseFloat((currentValue/total*100).toFixed(1));

                      return currentValue + ' (' + percentage + '%)';

                    },
                    title: function(tooltipItem, data) {
                      return data.labels[tooltipItem[0].index];
                    }
                  }
                },
                elements: {
                    center: {
                    text: '70.1%',
                    color: '#181818',
                    fontStyle: 'Helvetica',
                    sidePadding: 30
                  },
                  arc: {
                    borderWidth: 0.5,
                  }
                },
                title: {
                  display: false,
                  text: 'Doughnut Chart',
                  position: 'bottom'
                },
                legend: {
                  position: 'right',
                  boxWidth: 0,
                  reverse: true,

                  labels: {
                    fontSize: 13,
                    usePointStyle: true,
                    padding: 20,
                      generateLabels: function(chart) {
                          var data = chart.data;
                          if (data.labels.length && data.datasets.length) {
                              return data.labels.map(function(label, i) {
                                  var meta = chart.getDatasetMeta(0);
                                  var ds = data.datasets[0];
                                  var arc = meta.data[i];
                                  var custom = arc && arc.custom || {};
                                  var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
                                  var arcOpts = chart.options.elements.arc;
                                  var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                  var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                  var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
                                  var value = chart.config.data.datasets[arc._datasetIndex].data[arc._index];

                                  var dsSum = data.datasets[0].data[0];
                                  var dsSum2 = data.datasets[0].data[1];
                                  var dsSum3 = data.datasets[0].data[2];
                                  var dsSum4 = data.datasets[0].data[3];
                                  var dsSum5 = data.datasets[0].data[3];
                                  var totalSum = dsSum + dsSum2 + dsSum3 + dsSum4 + dsSum5;

                                  var percentageAsset = parseFloat((value/totalSum *100).toFixed(1));

                                  return {
                                      text: label + "  " + percentageAsset + '%',
                                      fillStyle: fill,
                                      strokeStyle: stroke,
                                      lineWidth: bw,
                                      hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
                                      index: i
                                  };
                              });
                          } else {
                              return [];
                          }
                    },
                  }
                },
              },
              layout: {},
        });
})