CODEWITHSUNDEEP
javascriptreactjschart.jsreact-chartjs
TheoKondak
TheoKondak

Reputation: 73

Hide all labels and tooltips in Chart.js and make it very small size

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.

Upvotes: 3

Views: 6676

Answers (2)

palaѕн
palaѕн

Reputation: 73916

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.net/npm/[email protected]"></script>

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

Upvotes: 4

HermitCrab
HermitCrab

Reputation: 3274

You can customize your chart using the options object:

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

Upvotes: 1

Related Questions