Chartjs-Chart.js – make background text responsive

by

0👍

✅

You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In your case, you could use the afterDraw hook to draw text at a position computed from the chart.scales.

Please take a look at your amended code and see how it works.

new Chart('chart-legend-bottom', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {      
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      let x = (xAxis.left + xAxis.right) / 2;
      let y = yAxis.getPixelForValue(0);
      let ctx = chart.chart.ctx;
      ctx.save();
      ctx.font = '40px Roboto black';
      ctx.textAlign = 'center';
      ctx.fillText('www.google.com', x, y);
      ctx.restore();
    }
  }],
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'My First Dataset',
      data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4],
      backgroundColor: "",
      borderColor: 'rgb(100, 73, 216)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'bottom'
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="chart-legend-bottom" width="600" height="400"></canvas>

Leave a comment