How to do Pie chart onload animation using billboard js

Question

I am using billboard js to develop a pie chart with animation. I am unable to do the onload animation so, How will apply onload animation?

Here is the example of onload animation. Please help us.

Here is my code in codepen

HTML Code

<div id="chart"></div>

JS code:

bb.generate({
    "data": {
        "columns": [
            ["data1", 30],
            ["data2", 50]
        ],
        "type": "pie",
        "xLocaltime": true,
        "xSort": true
    },
    "legend": {
        "show": false
    },
    "clipPath": true,
    "gauge": {
        "width": 0,
        "startingAngle": 0,
        "expand": {
            "duration": 88
        }
    },
    "pie": {
        "label": {
            "threshold": 100
        }
    },
    "donut": {
        "label": {},
    },
    "tooltip": {
        "show": false,
        "grouped": false
    },
  interaction: {
    enabled: false
  }
});

Thanks!

score 2 · Answer 1 · answered Aug 13 '19 at 00:21

The key point is initialize with '0' data and then load your final data.

// (1) Initialize with 0
var chart = bb.generate({
    "data": {
        "columns": [
            ["data1", 0],
            ["data2", 0]
        ],
});

// (2) then load data via .load() api
chart.load( ... );

Try with the Run code snippet.

var chart = bb.generate({
    "data": {
        "columns": [
            ["data1", 0],
            ["data2", 0]
        ],
        "type": "pie"
    },
    "legend": {
        "show": false
    },
    "pie": {
        "label": {
            show: false
        }
    },
    interaction: {
      enabled: false
    }
});

setTimeout(() => {
  chart.load({
          "columns": [
              ["data1", 30],
              ["data2", 50]
          ],
  });
}, 1000);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>billboard.js</title>
  <script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

How to do Pie chart onload animation using billboard js

1 Answers1