Chart.js 饼图，只有圆弧外侧有边框

Question

I have a pie chart made with chart.js and currently i'm wondering if its possible to only have a border for the outside of the circle / arc like so:

I tried the following configurations but it applies border the to the whole segment.

        options: {
          elements: {
              arc: {
                  borderWidth: 0
              }
          }
        }

and also:

    data: {
        datasets: [{
            data: [male_data , female_data],
            backgroundColor: pieColors1,
            borderWidth: [10, 0, 0, 0, 0]
        }]
    },

but this is what im getting:

Answer 1

I guess you have to create your own color image (Solid color with white strip on top) and pass it in as a canvas image.

Below is a modified example I've made based on the sample given from the chart.js documentation and a random picture found on the net.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> var img = new Image(); img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg'; img.onload = function() { var ctx = document.getElementById("myChart").getContext('2d'); var fillPattern = ctx.createPattern(img, 'repeat'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 10)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', fillPattern ], borderColor: [ 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)' ], borderWidth: 0 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); } </script>

Answer 2

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script> <canvas id="myChart" width="400" height="400"></canvas> <script> var img = new Image(); img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg'; img.onload = function() { var ctx = document.getElementById("myChart").getContext('2d'); var fillPattern = ctx.createPattern(img, 'repeat'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 10)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', fillPattern ], borderColor: [ 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)', 'rgba(0,0,0,100)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); } </script>