@bifplif

Как Стилизовать маркер легенды в Chart Js?

Хочу поменять маркеры легенды в закрашенные кружки
щас так
6626448d79072426805882.jpeg
надо так
662644a59f006798697661.jpeg

исходники
const ctx_<?php echo $ch; ?> = document.getElementsByClassName('page_chart_<?php echo $ch; ?>');
new Chart(ctx_<?php echo $ch; ?>, {
type: 'line',
data: {<?php if( have_rows('page_how_tit_left_ch_bottom') ): ?>labels: [<?php while( have_rows('page_how_tit_left_ch_bottom') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
datasets: [{
label: '<?php the_field('page_how_tit_left_ch_top'); ?>',
<?php if( have_rows('page_how_tit_left_ch_center') ): ?>data: [<?php while( have_rows('page_how_tit_left_ch_center') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
borderWidth:4,
fill: true,
borderColor: '#15CF74',
backgroundColor: 'transparent',
tension: 0.5
}, <?php if(get_field('page_how_tit_left_ch_top2')) { ?>{
type: 'line',
label: '<?php the_field('page_how_tit_left_ch_top2'); ?>',
<?php if( have_rows('page_how_tit_left_ch_center2') ): ?>data: [<?php while( have_rows('page_how_tit_left_ch_center2') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
borderWidth:4,
fill: true,
borderColor: '#F66C6A',
backgroundColor: 'transparent',
tension: 0.5
}<?php } ?>]
},
options: {

responsive: true,
scales: {
y: {
beginAtZero: true
},
}
},
});
const ctx_2<?php echo $ch; ?> = document.getElementsByClassName('page_chart_2<?php echo $ch; ?>');
new Chart(ctx_2<?php echo $ch; ?>, {
type: 'line',
data: {<?php if( have_rows('page_how_tit_left_ch_bottom') ): ?>labels: [<?php while( have_rows('page_how_tit_left_ch_bottom') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
datasets: [{
label: '<?php the_field('page_how_tit_left_ch_top'); ?>',
<?php if( have_rows('page_how_tit_left_ch_center') ): ?>data: [<?php while( have_rows('page_how_tit_left_ch_center') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
borderWidth:4,
fill: true,
borderColor: '#f7b432',
backgroundColor: 'transparent',
tension: 0.5
}, <?php if(get_field('page_how_tit_left_ch_top2')) { ?>{
type: 'line',
label: '<?php the_field('page_how_tit_left_ch_top2'); ?>',
<?php if( have_rows('page_how_tit_left_ch_center2') ): ?>data: [<?php while( have_rows('page_how_tit_left_ch_center2') ) : the_row(); ?>'<?php the_sub_field("txt"); ?>',<?php endwhile; ?>],<?php endif; ?>
borderWidth:4,
fill: true,
borderColor: '#4cb944',
backgroundColor: 'transparent',
tension: 0.5
}<?php } ?>]
},
options: {

responsive: true,
scales: {
y: {
beginAtZero: true
},
}
},
});
  • Вопрос задан
  • 24 просмотра
Решения вопроса 1
@bifplif Автор вопроса
Узнал ,
plugins: {
      legend: {
// Позиционируем легенду и маркер справа над графиком
	    position: 'top', 
            align: 'end',
        labels:	 {
          usePointStyle: true,	// Меняем фигуру маркера на круг
        },
      }
    }
  },
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы