Chartjs 和（更紧凑的）标题放置

Question

I am using Chartjs for some simple gauges (using pie chart) but when adding the title it is quite far apart and padding doesn't seem to help me:-( Does anyone know a way of placing the title closer to the gauge/pie chart?
image of title in pie/gauge chart here

var ctx103 = document.getElementById('chart103').getContext('2d');
new Chart(ctx103, {
  type: 'doughnut',
  data: {
    datasets: [{
      //label: '# of Votes',
      data: [80, 20],
      backgroundColor: ["green", "grey"]
    }]
  },
  options: {
    rotation: 270, // start angle in degrees
    circumference: 180, // sweep angle in degrees
    plugins: {
      title: {
        display: true,
        position: 'top',
        text: 'TITLE !!!!!',
        padding: {
          top: 0,
          bottom: 0
        }
      }
    }
  }
});

I have been trying different padding options but that just moves the title further away...

Answer 1

While this may not work for your specific application, in some cases this can be achieved using HTML/CSS.

This is the styling I used:

<style>
  #titleAndChart {
    margin: 0;
    position: absolute;
    height: 600px;
    width: 600px;
    box-sizing: border-box;
  }
  #titleDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
  }
  #chartDiv {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 600px;
  }
</style>

The HTML layout then becomes:

  <div id="titleAndChart">
    <div id="titleDiv">
      Chart title goes here
    </div> 
    <div id='chartDiv'>
      <canvas id="myChart"></canvas>
    </div>
  </div>

And the chart itself looks like this:

Chart.defaults.doughnut.circumference = Math.PI;
Chart.defaults.doughnut.rotation = -1 * Math.PI;
new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  options: {
    legend: {
      display: false,
    }
  },
  data: {
    labels: ['Red','Green'],
    datasets: [{
      data: [25,75],
      backgroundColor: ['red','green']
    }]
  }
});

Here's a fiddle using ChartJS v2.9.4:

https://jsfiddle.net/hdahle/4x670et8/

And here's a fiddle using ChartJS v4.0.1

https://jsfiddle.net/hdahle/k8zxvjyq/