Как добавить несколько цветов (разукрасить) текст в легенде Chart.js?

Question

Мне нужно разукрасить разными цветами легенду в своём графике на Chart.js. Пытаюсь подсунуть цвет прямо в текст, но выводит напрямую с кодом цвета.

Моя задача текст "по данным открытых источников" сделать разноцветным. Например, слово "данным" сделать красным цветом, а "источников" сделать зелёным. Возможно ли провернуть такое ? З

const ctx = document.getElementById('chart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Россия', 'Канада', 'США', 'Китай', 'Бразилия'],
    datasets: [{
        label: 'площадь в млн. кв. км.',
        data: [17.125, 9.985, 9.834, 9.599, 8.516],
        borderWidth: 2,
        // https://www.chartjs.org/docs/latest/general/colors.html#per-dataset-color-settings
        borderColor: 'rgba(245, 40, 40, 0.8)',
        backgroundColor: 'rgba(245, 40, 40, 0.5)'
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      title: {
        display: true,
        text: 'Статистика государств',
        // https://www.chartjs.org/docs/latest/general/fonts.html
        font: {
          family: 'monospace',
          size: 14
        }
      },
      subtitle: {
        display: true,
        text: 'по данным открытых источников',
        font: {
          family: 'monospace',
          size: 12
        }
      }
    }
  }
});

Возможно ли провернуть такое ?

Answer 1

Не совсем понятно с чем конкретно у Вас возникли проблемы, т.к. Вы не привели рабочий пример используемого Вами кода. Помимо этого в официальной документации имеются исчерпывающие примеры.

const ctx = document.getElementById('chart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Россия', 'Канада', 'США', 'Китай', 'Бразилия'],
    datasets: [{
        label: 'площадь в млн. кв. км.',
        data: [17.125, 9.985, 9.834, 9.599, 8.516],
        borderWidth: 2,
        // https://www.chartjs.org/docs/latest/general/colors.html#per-dataset-color-settings
        borderColor: 'rgba(245, 40, 40, 0.8)',
        backgroundColor: 'rgba(245, 40, 40, 0.5)'
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      title: {
        display: true,
        text: 'Статистика государств',
        // https://www.chartjs.org/docs/latest/general/fonts.html
        font: {
          family: 'monospace',
          size: 14
        }
      },
      subtitle: {
        display: true,
        text: 'по данным открытых источников',
        font: {
          family: 'monospace',
          size: 12
        }
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
  <canvas id="chart"></canvas>
</div>

БЛОГ НА HUSL

Как добавить несколько цветов (разукрасить) текст в легенде Chart.js?

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