Chart.JS changing the animations

by

👍:1

Here is an example:
https://github.com/src-mgra/node-sqlite-chart/blob/master/showChart.js

Some docu to control bartikhness barPercentage etc.
https://www.chartjs.org/docs/latest/charts/bar.html

here is a extended example:

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Chart.js demo</title>

    <!-- import plugin script -->
    <script src='Chart.min.js'></script>

</head>
<body>

<!-- pie chart canvas element -->
<canvas id="countries" width="600" height="400"></canvas>

<!-- bar chart canvas element -->
<canvas id="income" width="600" height="400"></canvas>


<script>


    // pie chart data
    var pieData = [
        {
            value: 20,
            color:"#878BB6"
        },
        {
            value : 40,
            color : "#4ACAB4"
        },
        {
            value : 10,
            color : "#FF8153"
        },
        {
            value : 30,
            color : "#FFEA88"
        }
    ];

    // pie chart options
    var pieOptions = {
        segmentShowStroke : false,
        animateScale : true
    }

    // get pie chart canvas
    var countries= document.getElementById("countries").getContext("2d");

    // draw pie chart
    new Chart(countries).Pie(pieData, pieOptions);



    // bar chart data
    var barData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
        {
            fillColor : "#48A497",
            strokeColor : "#48A4D1",
            data : [456,479,324,569,702,600]
        },
        {
            fillColor : "rgba(73,188,170,0.4)",
            strokeColor : "rgba(72,174,209,0.4)",
            data : [364,504,605,400,345,320]
        }
        ]
    }

    // get bar chart canvas
    var income = document.getElementById("income").getContext("2d");

    // draw bar chart
    new Chart(income).Bar(barData);

</script>

</body>
</html>

refer to: https://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/

Look at pieOptions and the canvas-element … The example can be tested in detail to show the options!

Leave a comment