Блог

Я пытаюсь составить график, используя chart.js и все работает отлично, только, к сожалению, у меня проблема с установкой легенды близко к диаграмме:(Это похоже на картинку, и я хотел бы иметь легенду, подобную второй картинке. Мой код:

    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'doughnut',
            data: {
                datasets: [{
                    data: [
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                        this.randomScalingFactor(),
                    ],
                    label: 'Dataset 1',
                    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#e8c3b9"],
                }],
                labels: [
                    '0.11 - 0.15 EUR',
                    '0.16 - 0.20 EUR',
                    '0.20 - 0.24 EUR',
                    '0.24 - 0.28 EUR',
                ]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'right'
                },
                title: {
                    display: true,
                    text: 'Service desk in English'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
    });
 

В компоненте у меня есть только:

  <canvas #lineChart>{{ chart }}</canvas>
 

Есть какие-нибудь идеи?