• Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
How to Create Bar Chart Race in JavaScript
Home
JavaScript

How to Create Bar Chart Race in JavaScript

June 12th, 2025 Huzoor Bux JavaScript 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

In this article, I am going to show you that How to Create Bar Chart Race in JavaScript very easily. You must watch many bar chart data visualization videos in this tutorial you can make data visualization with bar chart race. I have found this code snippet on codepen.io by Carlos and chart created by amCharts Library.

What if you show this type of chart as your companies sales reports and profits your boss might love it, just kidding 🙂

DEMO
DOWNLOAD CODE

amCharts Libraries needs to be included:

<script src="https://www.amcharts.com/lib/4/core.js"></script>

<script src="https://www.amcharts.com/lib/4/charts.js"></script>

<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

Charts Data for graphs visualization:



var allData = {

      "2014": [{

          "languages": "Objective-C",

          "PUSHES": 1.862

        },

        {

          "languages": "Go",

          "PUSHES": 1.973

        },

        {

          "languages": "Shell",

          "PUSHES": 2.813

        },



        {

          "languages": "C#",

          "PUSHES": 2.849

        },

        {

          "languages": "C",

          "PUSHES": 6.083

        },

        {

          "languages": "C++",

          "PUSHES": 7.372

        },

        {

          "languages": "Ruby",

          "PUSHES": 7.948

        },

        {

          "languages": "PHP",

          "PUSHES": 9.956

        },

        {

          "languages": "Java",

          "PUSHES": 12.396

        },

        {

          "languages": "Python",

          "PUSHES": 14.054

        },

        {

          "languages": "JavaScript",

          "PUSHES": 21.636

        },

        {

          "languages": "TypeScript",

          "PUSHES": 0.359

        }

      ],

      "2021": [{

          "languages": "Objective-C",

          "PUSHES": 0.328



        },

        {

          "languages": "Go",

          "PUSHES": 4.639



        },

        {

          "languages": "Shell",

          "PUSHES": 4.564



        },



        {

          "languages": "C#",

          "PUSHES": 2.654



        },

        {

          "languages": "C",

          "PUSHES": 3.463



        },

        {

          "languages": "C++",

          "PUSHES": 8.222



        },

        {

          "languages": "Ruby",

          "PUSHES": 4.051



        },

        {

          "languages": "PHP",

          "PUSHES": 5.323



        },

        {

          "languages": "Java",

          "PUSHES": 10.498



        },

        {

          "languages": "Python",

          "PUSHES": 14.183



        },

        {

          "languages": "JavaScript",

          "PUSHES": 28.653



        },

        {

          "languages": "TypeScript",

          "PUSHES": 4.94



        }

      ]

    }

Complete javascript Code:

    am4core.useTheme(am4themes_animated);

    am4core.globalAdapter.addAll(2)

    var chart = am4core.create("chartdiv", am4charts.XYChart);

    chart.padding(40, 40, 40, 40);

    chart.numberFormatter.numberFormat = "#,###.";

    var label = chart.plotContainer.createChild(am4core.Label);

    label.x = am4core.percent(97);

    label.y = am4core.percent(95);

    label.horizontalCenter = "right";

    label.verticalCenter = "middle";

    label.dx = -15;

    label.fontSize = 50;



    var playButton = chart.plotContainer.createChild(am4core.PlayButton);

    playButton.x = am4core.percent(97);

    playButton.y = am4core.percent(95);

    playButton.dy = -2;

    playButton.verticalCenter = "middle";

    playButton.events.on("toggled", function (event) {

      if (event.target.isActive) {

        play();

      } else {

        stop();

      }

    })



    var stepDuration = 4000;



    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());

    categoryAxis.renderer.grid.template.location = 0;

    categoryAxis.dataFields.category = "languages";

    categoryAxis.renderer.minGridDistance = 1;

    categoryAxis.renderer.inversed = true;

    categoryAxis.renderer.grid.template.disabled = false;



    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());

    valueAxis.min = 0;

    valueAxis.rangeChangeEasing = am4core.ease.linear;

    valueAxis.rangeChangeDuration = stepDuration;

    valueAxis.extraMax = 0.1;



    var series = chart.series.push(new am4charts.ColumnSeries());

    series.dataFields.categoryY = "languages";

    series.dataFields.valueX = "PUSHES";

    series.tooltipText = "{valueX.value}"

    series.columns.template.strokeOpacity = 0;

    series.columns.template.column.cornerRadiusBottomRight = 5;

    series.columns.maxColumns = 1

    series.columns.template.column.cornerRadiusTopRight = 5;

    series.interpolationDuration = stepDuration;

    series.interpolationEasing = am4core.ease.linear;

    var labelBullet = series.bullets.push(new am4charts.LabelBullet())

    labelBullet.label.horizontalCenter = "right";

    labelBullet.label.text = "{values.valueX.workingValue}";

    labelBullet.label.textAlign = "end";

    labelBullet.label.dx = -10;

    labelBullet.label.maxColumns = 1;

    chart.zoomOutButton.disabled = true;

    series.columns.template.adapter.add("fill", function (fill, target) {

      return chart.colors.getIndex(target.dataItem.index);

    });

    var year = 2014;

    label.text = year.toString();

    var interval;

    function play() {

      interval = setInterval(function () {

        nextYear();

      }, stepDuration)

      nextYear();

    }

    function stop() {

      if (interval) {

        clearInterval(interval);

      }

    }

    function nextYear() {

      year++



      if (year > 2021) {

        year = 2014;

        stop();

      }

      var newData = allData[year];

      var itemsWithNonZero = 0;

      for (var i = 0; i < chart.data.length; i++) { chart.data[i].PUSHES = (newData[i].PUSHES * 100000); if (chart.data[i].PUSHES > 0) {

          itemsWithNonZero++;

        }

      }

      if (itemsWithNonZero > 25) {

        itemsWithNonZero = 25

      }

      if (year == 2014) {

        series.interpolationDuration = stepDuration / 8;

        valueAxis.rangeChangeDuration = stepDuration / 8;

      } else {

        series.interpolationDuration = stepDuration;

        valueAxis.rangeChangeDuration = stepDuration;

      }



      chart.invalidateRawData();

      label.text = year.toString();



      categoryAxis.zoom({

        start: 0,

        end: itemsWithNonZero / categoryAxis.dataItems.length

      });

    }



    categoryAxis.sortBySeries = series;

    var allData = {} // you can add data here.



    chart.data = JSON.parse(JSON.stringify(allData[year]));

    categoryAxis.zoom({

      start: 0,

      end: 1 / chart.data.length

    });



    series.events.on("inited", function () {

      setTimeout(function () {

        playButton.isActive = true; // this starts interval

      }, 1000)

    })

Make your charts and share us in the comments box.

DEMO
DOWNLOAD CODE

I hope you liked this tutorial if you want more tutorials please request a tutorial here.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

  • Tags
  • Chart
  • data visualisation
  • How to
  • javascript
Facebook Twitter Google+ LinkedIn Pinterest
Next article DataTables Server-side Processing with PHP and MySQL
Previous article Best 10 Programming Languages that will rule in 2022

Huzoor Bux

I am a PHP Developer

Related Posts

JavaScript tips and tricks, Part 2 JavaScript
June 18th, 2025

JavaScript tips and tricks, Part 2

Working with dates in PHP and JavaScript JavaScript
June 18th, 2025

Working with dates in PHP and JavaScript

Useful JavaScript globals JavaScript
June 18th, 2025

Useful JavaScript globals

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe
Get new posts by email:
Powered by follow.it
Advertisement
Like us
Recent Posts
  • 9 Best Programming languages you should learn in 2021
  • What is Progressive Web Applications and Why Create a PWA?
  • 7 HTML attributes that you must learn today!
  • Why Use MongoDB and When to Use It?
  • Introduction to Git for version control
Categories
  • API
  • Bootstrap
  • Bot
  • CSS
  • CSS 3
  • Database
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • Laravel
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • Web 3.0
  • WordPress
Weekly Tags
  • PHP
  • How to
  • javascript
  • laravel
  • MYSQL
  • PHP framework
  • css
  • jQuery
  • HTML to PDF
  • Web Development
  • About
  • Privacy Policy
  • Back to top
© PHPLift.net. All rights reserved.