Chartjs-Chartjs and (more compact) title placement

by

0👍

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/

Leave a comment