Скрыть все метки и всплывающие подсказки в Chart. js и сделать его очень маленьким

Question

Итак, я пытаюсь создать минималистичный c график с использованием реагирующей диаграммы js -2 в своем приложении реакции.

Чего я хочу добиться, так это иметь очень маленький график без какой-либо метки, показывающей внутри маленькой карты, которую я создал. Я хочу скрыть метки, условные обозначения и даже сетку диаграммы.

Я не могу найти способ заставить его работать таким образом в документации или других вопросах переполнения стека, на которые я смотрел.

Результат должен выглядеть примерно так: Желаемый результат

Как это выглядит сейчас

Заранее спасибо.

Answer 1

Вы можете просто обновить свойство options, например:

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

. Чтобы сделать его очень маленьким, вы можете поместить холст в контейнер div, например:

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

и добавьте немного CSS как:

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

Вы можете обновить width & height здесь согласно вашему требованию.

Рабочая демонстрация:

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>

Answer 2

Вы можете настроить график, используя объект параметров:

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