A small library for simple doughnut or pie charts

You can test it out here: https://itchiii.github.io/BasicDoughnutChart/

• Create a doughnut chart
• Set a higher stroke width to create a pie chart
• Decide if labels should shown or not
• Set individual colors for each segment
• Create a effect to show a border on a segment
• The border can be static or shown when hovering
• Set individual class names for each segment
• Set a margin between the segments

1. Just download the BasicDoughnutChart.mjs and the BasicDoughnutChart.css file. Or both as minify version in the build folder.

2. Import the BasicDoughnutChart Class into your script file.

   import { BasicDoughnutChart } from './BasicDoughnutChart.mjs';

3. Link the css file into your html file.

   <link rel="stylesheet" href="BasicDoughnutChart.css">

4. Create an empty element in your html file with an id.

   <figure id="bdc"></figure>

5. Create a new instance of the BasicDoughnutChart Class and set some options and the data.

   const doughnut = new BasicDoughnutChart('bdc', {
     height: 350,
     width: 350,
     strokeWidth: 40,
     borderEffect: {
       strokeWidth: 7,
       distance: 7,
     }
   },
     {
       values: [17, 19, 7, 20, 37],
       colors: ['#90f1ef', '#ffd6e0', '#ffef9f', '#c1fba4', '#7bf1a8'],
       actives: [false, true, false, false, false],
     }
   );

6. Draw your new doughnut chart

   doughnut.draw();