В библиотеке Chart.js для стилизации маркера легенды можно использовать объект legend
в опциях графика. Для каждого элемента в легенде можно задать не только стиль, но и размер, форму и т.д. Вот пример:
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'red', 'blue', 'yellow', 'green', 'purple', 'orange' ], borderColor: [ 'red', 'blue', 'yellow', 'green', 'purple', 'orange' ], borderWidth: 1 }] }, options: { legend: { labels: { fontColor: 'black', // Цвет текста маркера fontFamily: 'Arial', // Шрифт текста маркера fontSize: 14 // Размер текста маркера } } } });
Помимо примера выше, в объекте labels
у legend
есть и другие параметры для настройки маркера легенды, такие как padding
, generateLabels
, usePointStyle
, pointStyle
, filter
, align
и др.
Обратите внимание, что вы также можете использовать CSS для стилизации легенды. Для этого нужно воспользоваться **callback** и получить доступ к мини-контейнеру, содержащему текст элемента легенды.
Надеюсь, это поможет вам стилизовать маркеры в вашем графике Chart.js!