Chartjs-Draw a single frame in Chart.js

by

1👍

You could draw a border around the canvas by defining some CSS style.

<canvas id="chart" style="border: 2px solid #000000;"></canvas>

Together with this, you need to make sure, the chart ground lines on x an y fit the limit of the canvas. This can be done by defining some minus padding as follows:

layout: {
  padding: {
    left: -10,
    bottom: -10
  }
},

The last point is to completely hide your axes by defining yAxes.display: false and xAxes.display: false.

Please have a look at your amended code below

new Chart('chart', {
  type: 'scatter',
  data: {
    // labels: names,
    datasets: [{
      data: [{ 'x': 0.1, 'y': 0.1 }, { 'x': 0.4, 'y': 0.4 }, { 'x': 0.8, 'y': 0.8 }]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    scaleShowLabels: false,
    layout: {
      padding: {
        left: -10,
        bottom: -10
      }
    },
    title: {
      display: false,
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        display: false,     
        ticks: {
          beginAtZero: true,
          max: 1
        }
      }],
      xAxes: [{
        display: false,
        ticks: {
          beginAtZero: true,
          max: 1
        },
      }]
    }
  }
});
style="border:1px solid #000000;"
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart" style="border: 2px solid #000000;"></canvas>

Leave a comment