3

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.

palaѕн
  • 72,112
  • 17
  • 116
  • 136
TheoKondak
  • 63
  • 1
  • 6
  • when you ask for help related to code, please add minimal working snippets or link to jsfiddle or codesandbox.io – SpiritOfDragon Apr 08 '20 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 components, and posting just some of it here would make things even worse for people trying to help. – TheoKondak Apr 08 '20 at 14:12

2 Answers2

4

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/chart.js@2.8.0"></script>

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>
palaѕн
  • 72,112
  • 17
  • 116
  • 136
  • Thank you for your reply! I had tried these settings before, but I saw no change, but since your reply I found that the issue was elsewhere in my code. So I updated the Chart component settings, and indeed they work. I was placing the options on the wrong component. About the height, I already found how that works. Thank you again, my problem is solved :) – TheoKondak Apr 08 '20 at 14:08
  • Thank you again. I am new to stackOverflow and not familiar with the UI. I now marked the answer as accepted. Have a wonderful day – TheoKondak Apr 08 '20 at 14:18
  • No probs at all. Same to you and stay safe! – palaѕн Apr 08 '20 at 14:20
1

You can customize your chart using the options object:

options = { title: { display: false }, legend: { display: false } };
HermitCrab
  • 3,194
  • 1
  • 11
  • 10
  • Thank you very much, for your reply, Palash already gave a comprehensive reply, which is similar to yours and fixes my issue. – TheoKondak Apr 08 '20 at 14:10