Изменить цвет шрифта меток данных на гистограмме - chartsjs-plugin-data-labels

У меня есть следующая гистограмма. вот параметры javascript для него:

  public chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: true,
      labels: {
        fontColor: "black",
        fontSize: 12,
      },
    },
    scales: {
      yAxes: [
        {
          display: true,
          stacked: false,
          scaleLabel: {
            display: true,
            labelString: "Number of Students",
          },
          ticks: {
            stepSize: 5,
            min: 0,
            max: 30,
            fontSize: 12,
            fontColor: "black",
          },
        },
      ],
      xAxes: [
        {
          display: true,
          stacked: false,
          ticks: {
            fontSize: 12,
            fontColor: "black",
            precision: 0,
          },
        },
      ],
    },
  };

Вот html:

          <canvas
            baseChart
            [datasets] = "chartData"
            [labels] = "chartLabels"
            [options] = "chartOptions"
            [colors] = "chartColors"
            [plugins] = "[]"
            [legend] = "true"
            [chartType] = "'bar'"
            height = "300px"
          >
          </canvas>

Иногда на столбцах появляются метки данных (см. рисунок), но я не могу понять, как изменить цвет, чтобы сделать их белыми. Кто-нибудь знает?

ОБНОВИТЬ:

Вот диаграмма с новыми параметрами диаграммы, но по-прежнему не меняет цвет меток данных:

  chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: true,
    },
    scales: {
      yAxes: [
        {
          display: true,
          stacked: false,
          scaleLabel: {
            display: true,
            labelString: "Number of Students",
          },
          ticks: {
            stepSize: 5,
            min: 0,
            max: 30,
            fontSize: 12,
            fontColor: "black",
          },
        },
      ],
      xAxes: [
        {
          display: true,
          stacked: false,
          ticks: {
            fontSize: 12,
            fontColor: "black",
            precision: 0,
          },
        },
      ],
    },
    plugins: {
      labels: {
        fontColor: "white",
        fontSize: 12,
      },
    },
  };
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, проблема в том, что вы добавляете конфигурацию плагина baels в конфигурацию легенды.

Так должно быть:

  options: {
  ...
    plugins: {
      labels: {
        fontColor: "black",
        fontSize: 12,
      },
    }
  ...
  }

Спасибо, я только что переместил его и изменил его на этот с fontColor как белый, но он по-прежнему показывает их черным

user19238266 17.11.2022 18:01

Вы можете поделиться новыми вариантами диаграммы?

user2057925 17.11.2022 18:27

добавил новые опции, но все равно не работает, спасибо

user19238266 17.11.2022 21:40

Я думаю, что проблема в этом плагине: chartsjs-plugin-data-labels

user19238266 17.11.2022 22:05
Ответ принят как подходящий

Проблема была связана с плагином «chartsjs-plugin-data-labels», который у меня был. Исправлено, добавив это в массив наборов данных.

        dataLabels: {
          colors: ["white"],
        },

хорошо, потому что, взглянув на первые опубликованные вами варианты, похоже, что вы использовали метки chartjs-plugin-labels, а не метки chartjs-plugin-data (это 2 разных плагина)

user2057925 18.11.2022 11:46

Другие вопросы по теме