So I am trying to create some minimalistic chart using react-chartjs-2 in my react app.

What I want to achieve, is to have a very small chart without any kind of label showing inside a small card I have created. I want to hide labels, legend, even the chart grid.

I can't find how to make it work like this in the documentation or other stack overflow questions I've looked upon.

The result should look similar to this: Desired Result

How it looks right now

Thank you in advance.

So I am trying to create some minimalistic chart using react-chartjs-2 in my react app.

What I want to achieve, is to have a very small chart without any kind of label showing inside a small card I have created. I want to hide labels, legend, even the chart grid.

I can't find how to make it work like this in the documentation or other stack overflow questions I've looked upon.

The result should look similar to this: Desired Result

How it looks right now

Thank you in advance.

• javascript
• reactjs
• chart.js
• react-chartjs

• when you ask for help related to code, please add minimal working snippets or link to jsfiddle or codesandbox.io – SpiritOfDragon Commented Apr 8, 2020 at 13:40
• Thank you. I usually do that, but I thought that in this specific situation, my code is irrelevant since I am looking for some Chart JS settings which are generic. Another issue is that the related code is nested into multiple ponents, and posting just some of it here would make things even worse for people trying to help. – TheoKondak Commented Apr 8, 2020 at 14:12

2 Answers 2

You can simply update options property like:

options: {
    tooltips: {
      enabled: false,
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{display: false}],
      yAxes: [{display: false}],
    }
  }

And to make it very small, you can put the canvas inside a container div like:

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>

and add some CSS like:

.chart-container {
   width: 200px;
}
#myChart {
  display: block; 
  width: 200px; 
  height: 50px;
}

You can update width & height here as per your requirement.

Working Demo:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 15, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {
    tooltips: {
      enabled: false,
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        display: false
      }],
    }
  }
});

.chart-container {
   width: 200px;
}
#myChart {
  display: block; 
  width: 200px; 
  height: 50px;
}

<script src="https://cdn.jsdelivr/npm/[email protected]"></script>

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>

You can customize your chart using the options object:

options = { title: { display: false }, legend: { display: false } };