Sample Bar Chart in Apache Echarts

Abhijeet Pratap
Page content

Draw Bar Charts in Apache Echarts

Echarts is an excellent javascript based charting library for creating various types of charts and provides attractive customizations. It can run well on PCs and mobile devices and is compatible with most of the modern web browsers. Echart uses ZRender, a graphic rendering engine to create highly customizable and interactive charts.

Installing Echarts is simple and so is adding data to it. It also allows you to set the size of the canvas using a div element. Echarts supports all the basic chart types including line, bar, scatter and other types of charts apart from several advanced chart types including map series, heatmap series, line series, graph series and so on.

It is possible to create awesome charts even with very large datasets and customize them to make them look highly attractive in Echarts.

In this article, we will show you how to install Echarts and draw a simple bar chart.

Note: You can define data in datasets or under series for xAxis and YAxis.

Install Echarts

You can install Echarts using either npm or by including a script with the cdn link into the head. Just add the following script to your website head and start drawing charts.

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

Otherwise, if you want, you can install it using npm with the following command:

npm install echarts --save

Draw a bar chart with Echarts

To start drawing charts in Echarts, we first need to draw the canvas for holding the chart. Here is how you can easily create it:

<body>
  <!-- Prepare a DOM with a defined width and height for ECharts -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

You can set the width and height according to your need.

Now, we will add the rest of the script to create a simple bar chart in Echarts.

Here is how the complete scrcipt looks:

 <div id="main" style="width: 900px;height:400px;"></div>
 <script src="
https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js
"></script>
   <script type="text/javascript">
     
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
        title: {
          text: 'Sample bar chart in ECharts'
        },
        tooltip: {},
        legend: {
          data: ['sales']
        },
        xAxis: {
          data: ['Shirts', 'Tshirts', 'Shoes', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [15, 22, 46, 16, 18, 20]
          }
        ]
      };

      myChart.setOption(option);
    </script>

The output will look similar to the following. Here we have set the data using series for each of the axes.

Sample bar chart in Echarts

We can also add the data using datasets as in the following example:


 <div id="main" style="width: 900px;height:400px;"></div>
 <script src="
https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js
"></script>
   <script type="text/javascript">
     
      var myChart = echarts.init(document.getElementById('main'));

      var option = {
  legend: {},
  tooltip: {},
  dataset: {
    
    source: [
      ['product', '2015', '2016', '2017'],
      ['Milk', 40, 85, 90],
      ['Tea', 80, 70, 55],
      ['Cheese', 85, 65, 80],
      ['Biscuits', 70, 50, 40]
    ]
  },
  // Declare an x-axis (category axis).
  // The category map the first column in the dataset by default.
  xAxis: { type: 'category' },
  // Declare a y-axis (value axis).
  yAxis: {},


  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

      myChart.setOption(option);
    </script>

In this case, we have used datasets instead of series to draw the bar chart in Echarts. Our output will look like the following:

Sample bar chart