Chartjs pie обводка ячейки только по внешней стороне

Question

Не могу победить две проблемы:

когда делаю обводку элементу (одному ark), белая линия в середине тоже становится цвета обводки.
не получается выдвинуть ячейки на (условно) 5 пиксилей, чтобы они выглядели не по одному кругу.

У меня есть отделенная кастомная legend у этого блока, и цифры тоже на ячейках выводятся правильно через chartjs-plugin-datalabels.

Возможно, у кого-то есть идеи как можно сделать ?
НЕ исключаю возможности выбора другого js скрипта для этого. chartjs не является обязательным выбором, главное, чтобы был по бесплатной лицензии.

Буду очень благодарен любым подсказкам. Проковырялся весь день, руки совсем опустились.. :)

$(document).ready(function () {
  var ctx = document.getElementById("chartjs-1").getContext("2d");
  var chart = new Chart(ctx, {
    type: "pie",
    data: {
      labels: ["Green", "Blue", "Gray", "Purple"],
      datasets: [
        {
          backgroundColor: ["#F1F1F1", "#F1F1F1", "#F1F1F1", "#F1F1F1"],
          hoverBackgroundColor: ["#F1F1F1", "#F1F1F1", "#F1F1F1", "#F1F1F1"],
          borderColor: ["#FF0000", "#000000", "#F2994A", "#56CCF2"],
          data: [12, 19, 3, 17],
        },
      ],
    },

    options: {
      elements: {
        arc: {
          borderWidth: 5,
          borderColor: "white",
          borderAlign: "left",
        },
      },
      legend: {
        display: false,
      },
      legendCallback: function (chart) {
        console.log(chart.data);
        var text = [];
        text.push("<ul>");
        for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
          text.push("<li>");
          text.push(
            '<span style="background-color:' +
              chart.data.datasets[0].borderColor[i] +
              '">' +
              chart.data.datasets[0].data[i] +
              "</span>"
          );
          if (chart.data.labels[i]) {
            text.push(chart.data.labels[i]);
          }
          text.push("</li>");
        }
        text.push("</ul>");
        return text.join("");
      },
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="chartjs-1"></canvas>

Использую chart.js и пытаюсь сделать такой pie график (Ячеек может быть сколько угодно):

Answer 1

если коротко - нет

Библиотека chart.js не реализует такой функционал.

Однако, в chart.js есть поддержка плагинов а это означает что:

кто-то мог написать плагин, реализующий желаемый вами функционал
вы сами можете написать такой плагин

грязный хак

const options = {};
const data1 = {
    data: [10, 20, 30],
    // background
    backgroundColor: ["#a55", "#aa5", "#555"],
    // hoverBackgroundColor: ["Red", "Yellow", "Blue"],
    // border
    borderColor: repeat('#fff', 3),
    // hoverBorderColor: ["#a55", "#aa5", "#555"],
    borderWidth: 19,
    hoverBorderWidth: 0,
    borderAlign: 'inner',
};
const data = {
    datasets: [data1],
    labels: ['A', 'B', 'C'],
};
const type = 'pie';
// const config: Chart.ChartConfiguration = { type, data, options }
ch1: {
    var ctx = document.getElementById("ch1").getContext("2d");
    var chart = new Chart(ctx, { type, data, options });
}
ch2: {
    const data2 = Object.assign(Object.assign({}, data1), { backgroundColor: ["#b66", "#bb6", "#666"], borderWidth: 2 });
    const data = {
        datasets: [data2],
    };
    var ctx = document.getElementById("ch2").getContext("2d");
    var chart = new Chart(ctx, { type, data, options });
}
q: {
    const ch1 = document.getElementById("ch1");
    const ch2 = document.getElementById("ch2");
    ch2.addEventListener('mousemove', e => {
        if (e.isTrusted)
            ch1.dispatchEvent(new MouseEvent('mousemove', e));
    });
    ch1.addEventListener('mousemove', e => {
        if (e.isTrusted)
            ch2.dispatchEvent(new MouseEvent('mousemove', e));
    });
}
// -,-
function repeat(str, length) {
    return Array.from({ length }, () => str);
}
// -,-
// -,-
// -,-

#ch1, #ch2 {
  position: fixed;
  top:0;
  left:0;
}

#ch2{
  transform: scale(0.8, 0.8);
  top:12px;
  left:0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<canvas id="ch1"></canvas>
<canvas id="ch2"></canvas>

обрати внимание на комментарии // FIXME

P.S.

времени, затраченного мной на изучение вопроса и написании этого ответа вполне могло бы хватить на реализацию без библиотеки. например так: Как изменить цвет, размер сектора круга при наведении на него?

UPD

Посоветуете другую библиотеку :) ?

Нуу, не долго думая, выберем d3js и сформируем для поиска в гугле такой запрос: d3js pie piece arc outside -label (может быть удобно искать в разделе картинки).

Вот несколько статей по этому запросу:

БЛОГ НА HUSL

Chartjs pie обводка ячейки только по внешней стороне

Ответы (1 шт):

если коротко - нет

грязный хак

P.S.

UPD