Настройка option для Chart.js

Question

сообщество! У меня возникла проблема, которую никак не могу решить, используя различные ресурсы. Я использую библиотеку для создания диаграмм Chart.js.

Что именно не получается?

Мне необходимо изменить всплывающее окно при наведении на точку (point). По каким-то причинам внутри этой точки находится не только числовое значение, но и цвет бордера.

Буду искренне признателен за помощь в этом проекте. Спасибо введите сюда описание изображения

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/_reset.css">
    <script src="./js/Chart.js"></script>
    <script src="./js/Chart.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <section class="statistic-and-activity-block">
      <div class="statistic-and-activity-block-container">
        <div class="statistics-main">
          <span class="statistics-titles">
            <p class="statistics-title">Статистика побед</p>
            <p class="statistics-subtitle">Последние 30 дней</p>
          </span>
          <div class="statistics-graph">
            <canvas id="bar-chart-red" width="1292" height="157"></canvas>
          </div>
        </div>
        <div class="activity-main">
          <span class="activity-titles">
            <p class="activity-title">Активность пользователя</p>
            <p class="activity-subtitle">Последние 30 дней</p>
          </span>
          <div class="activity-graph">
            <canvas id="bar-chart-blue" width="1292" height="157"></canvas>
          </div>
        </div>
      </div>
    </section>
    <script src="./js/script.js"></script>
  </body>
</html>

script.js

// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';

var bar_ctx_red = document.getElementById("bar-chart-red").getContext("2d");

var purple_orange_gradient = bar_ctx_red.createLinearGradient(0, 0, 0, 150);
purple_orange_gradient.addColorStop(0, '#ff003a');
purple_orange_gradient.addColorStop(1, "transparent");

var options = {
  //Boolean - Whether the line is curved between points
  bezierCurve: false,
};
var bar_chart_red = new Chart(bar_ctx_red, {
  type: "line",
  data: {
    labels: [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ],
    datasets: [
      {
        data: [60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 20, 34, 13, 60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 130, 58, 13, 60],
        backgroundColor: purple_orange_gradient,
        hoverBackgroundColor: purple_orange_gradient,
        borderWidth: 1,
        borderColor: "#ff003a",
        lineTension: 0,
        pointHoverRadius: 10,
        pointHoverBackgroundColor: "transparent",
        pointBackgroundColor: "#ff003a",
      },
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: false,
            stepSize: 10,
            maxTicksLimit: 4,
          },
          gridLines: {
            color: "#292224",
          },
        },
      ],

      xAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
          gridLines: {
            color: "#292224",
          },
        },
      ],
    },

    legend: {
      display: false,
    },

    tooltips: {
      backgroundColor: "transparent",
    },
  },
});

// Chart.defaults.global.elements.rectangle.backgroundColor = '#FF0000';

var bar_ctx_blue = document.getElementById("bar-chart-blue").getContext("2d");

var purple_orange_gradient = bar_ctx_red.createLinearGradient(0, 0, 0, 150);
purple_orange_gradient.addColorStop(0, "#0090ff");
purple_orange_gradient.addColorStop(1, "transparent");
var options = {
  //Boolean - Whether the line is curved between points
  bezierCurve: false,
};
var bar_chart_blue = new Chart(bar_ctx_blue, {
  type: "line",
  data: {
    labels: [
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      "",
      ""
    ],
    datasets: [
      {
        data: [60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 20, 34, 13, 60, 70, 58, 42, 67, 60, 64, 42, 60, 46, 90, 61, 130, 58, 13, 60],
        backgroundColor: purple_orange_gradient,
        hoverBackgroundColor: purple_orange_gradient,
        borderWidth: 1,
        borderColor: "#0090ff",
        lineTension: 0,
        pointHoverRadius: 10,
        pointHoverBackgroundColor: "transparent",
        pointBackgroundColor: "#0090ff",
        pointHoverBorderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: false,
            stepSize: 10,
            maxTicksLimit: 4,
          },
          gridLines: {
            color: "#292224",
          },
        },
      ],

      xAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
          gridLines: {
            color: "#292224",
          },
        },
      ],
    },

    legend: {
      display: false,
      label: {
        fontColor: 'black'
    }
    },

    tooltips: {
      backgroundColor: "transparent",
    },
  },
});

БЛОГ НА HUSL

Настройка option для Chart.js

Ответы (0 шт):