Basic Pie/Donut Chart Plugin With jQuery And SVG - jChart

Basic Pie/Donut Chart Plugin With jQuery And SVG - jChart

jChart is an easy-to-use jQuery plugin for rendering SVG based, vector shaped pie & donut charts that display each value as a part of a pie or donut.

1. Import the latest version of jQuery library and the jChart plugin's script into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="/src/js/jchart.js"></script>

2. Create a container element to hold the chart.

<div id="element"></div>

3. Prepare your data in an array of objects as these:

const mydata = [
      {
        value: 300
      },
      {
        value: 100,
        color: '#77dd4f', // stroke color of the segment
        draw: true, // draw the segment on the chart or not
        push: true //push the next segment via offset
      },
      {
        value: 100,
        color: '#dd5723'
      }
]

4. Initialzie the plugin and render a default donut chart inside the container you just created.

const myChart = $("#element").jChart({
  data: myData
});

5. Render the data as a pie chart instead.

const myChart = $("#element").jChart({
  data: myData,
  appearance: {
    type: 'donut'
  }
});

6. The necessary CSS to style the pie & donut chart.

.jchart--donut--segment, .jchartpie--segment {
  transition: stroke-dasharray 1s ease;
}
.jchart {
  width: 400px;
  height: 400px;
}
.jchart--body {
  width: 100%;
  height: 100%;
}

7. All default configuration options.

const myChart = $("#element").jChart({
  // selectors
  elements: {
    container: null,
    body: null,
  },
  // your own data
  data: [],
  // values necessary for the graphing, like sum of values of all segments
  values: {}, 
  // appearance options
  appearance: {
    type: 'donut',
    baseColor: '#ddd',
    segmentColor: '#00a3f2',
    baseOffset: 0,
  },
  // callback function
  callbacks: {
    onInit() {}
  }
  
});

This awesome jQuery plugin is developed by Falkan3. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 15.07.2018
  • Source