freecoder-ru
@freecoder-ru

Как правильно настроить Legend для chart.js?


По данной ссылки
не могу понять, как пользоваться этим legend.

У меня есть график в котором я пытаюсь менять настройки legend но ничего не происходит.
Кто может объяснить, как правильно пользоваться legend?

Пока из того, что я понял, legend относится к надписи над графиком, в моём случае "label: '# of Votes'" , но некоторые настройки (такие как позиционирование) не работают:

fontColor:"blue", //Работает
                    fontFamily:"Calibri Light" , // Работает
                    fontStyle:"italic", // Работает

                     position:"bottom", // Неработает
                      display:false, // Неработает


var ctx = document.getElementById("thirdChart");
    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, 8],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            legend: {
                labels: {
                    position:"bottom",
                    fontColor:"black",
                    fontFamily:"Calibri Light",
                    fontStyle:"italic",
                }
            }
        }
    });
  • Вопрос задан
  • 4640 просмотров
Решения вопроса 1
0xD34F
@0xD34F
У labels нет свойства position, оно относится к legend. То есть, должно быть так:

legend: {
  position: 'bottom',
  labels: {
    fontColor: 'black',
    fontFamily: 'Calibri Light',
    fontStyle: 'italic'
  }
}

То же касается и свойства display.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы