Question

-3

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

rated 0 times [ 2] [ 5] / answers: 1 / hits: 5161 / 4 Years ago, wed, april 8, 2020, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karivictoriab

Add To Favorites

Follow

Total Points: 530

Total Questions: 90

Total Answers: 95

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

karivictoriab questions

1 JSX props should not use arrow functions eslint warning

Wed, Feb 10, 21, 00:00, 3 Years ago

1 How to scroll and expand an Accordion by onClick on an icon from a component?

Fri, Aug 21, 20, 00:00, 4 Years ago

1 CORS – Cross Origin Request Blocked – The 'Access-Control-Allow-Origin' header contains invalid value

Fri, Jan 24, 20, 00:00, 4 Years ago

1 VueJs clear form after success

Mon, Dec 30, 19, 00:00, 4 Years ago

1 CryptoJS decryption Malformed UTF-8 data error

Fri, Nov 29, 19, 00:00, 5 Years ago

View All

answered 4 Years ago lawrencem · Accepted Answer

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>