<tutorialjinni.com/>

Simple Bar Chart Example

Posted Under: Charts, ECharts, Tutorials on Jul 9, 2023
Simple Bar Chart Example
Data visualization is an integral part of conveying information effectively. Bar charts are a popular choice for presenting categorical data in a visually appealing and interactive manner. In this tutorial, we will explore how to create a simple bar chart using HTML, JavaScript, and CSS. To accomplish this, we will utilize the powerful ECharts library, which provides a wide range of charting capabilities.

To begin, simply add the EChart Library from a CDN in your HTML file. 
<script src="https://cdn.tutorialjinni.com/echarts/5.4.2/echarts.min.js"></script>
For the purpose of this example, let's assume we have survey data that captures the preferences of individuals regarding their favorite fruits. Create an array to store the data, where each element represents a fruit category and its corresponding value. Here's an example: 
<!DOCTYPE html>
<html>
<head>
  <title>Simple Bar Chart Example</title>
  <style>#chart-container {width: 90%;height: 500px;}</style>
</head>
<body>
  <div id="chart-container"></div>
  <script src="https://cdn.tutorialjinni.com/echarts/5.4.2/echarts.min.js"></script>
  <script>
    const data = [
      { fruit: 'Apples', value: 25 },
      { fruit: 'Bananas', value: 35 },
      { fruit: 'Oranges', value: 20 },
      { fruit: 'Strawberries', value: 20 },
    ];
    document.addEventListener('DOMContentLoaded', function() {
      const chartContainer = document.getElementById('chart-container');
      const chart = echarts.init(chartContainer);
      const categories = data.map(item => item.fruit);
      const values = data.map(item => item.value);
      const options = {
        title: {
          text: 'Favorite Fruits',
          subtext: 'Survey Results',
        },
        xAxis: {
          type: 'category',
          data: categories,
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          type: 'bar',
          data: values,
        }],
      };
      chart.setOption(options);
    });
  </script>
</body>
</html>
This will render as below


Multiple Bars can be added in the x-axis with very little change. Let's assume we have data on the population and greenhouse gas emissions of several countries. Create two arrays to store this information. Each element in the arrays will represent a country and its corresponding values. Here's an example: 
<html>
<head>
  <title>Simple Bar Chart Example</title>
  <style>
    #chart-container-multi {width: 90%;height: 500px;}
  </style>
</head>
<body>
  <div id="chart-container-multi"></div>
  <script src="https://cdn.tutorialjinni.com/echarts/5.4.2/echarts.min.js"></script>
  <script>
    const countries = ['USA', 'China', 'India', 'Russia', 'Japan'];
    const populationData = [331, 1444, 1393, 145, 126];
    const emissionsData = [5741, 14257, 2666, 1587, 1153];
    document.addEventListener('DOMContentLoaded', function() {
      const chartContainer = document.getElementById('chart-container-multi');
      const chart = echarts.init(chartContainer);
      const options = {
        title: {
          text: 'Population and Greenhouse Gas Emissions by Country',
          subtext: 'Data Source: World Bank',
        },
        legend: {
          data: ['Population', 'Greenhouse Gas Emissions'],
        },
        xAxis: {
          type: 'category',
          data: countries
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Population',
            type: 'bar',
            data: populationData
          },
          {
            name: 'Greenhouse Gas Emissions',
            type: 'bar',
            data: emissionsData
          },
        ],
      };
  chart.setOption(options);
});
  </script>
</body>
</html>
This is will render like this


imgae