Spread.Sheets Documentation
Creating Bar Chart
Spread.Sheets Documentation > Developer's Guide > Customizing the Appearance > Understanding Chart > Working with Chart Types > Creating Bar Chart

A bar chart is extensively used to illustrate comparisons between individual items or categories.

The data arranged in columns or rows of a worksheet can be plotted in a bar chart. In bar charts, the categories are organized along the vertical axis with the data values along the horizontal axis.

Spread.Sheets supports the following types of bar charts. In the examples shown below, the annual sales record for Quarter 1, Quarter 2 and Quarter 3 for different categories of gadgets: Mobile Phones, Laptops and Tablets is depicted in different types of bar charts.

  1. Clustered Bar Chart

    A clustered bar chart displays the comparisons of values across different categories.

    An image of a clustered bar chart is shown below:
            

  2. Stacked Bar Chart

    A stacked bar chart displays the relationship of each item/category to the whole in two-dimensional and three-dimensional rectangles.

    An image of a stacked bar chart is shown below:
            

  3. 100% Stacked Bar Chart

    A 100% stacked bar chart displays the comparisons of percentage that each of the values contribute to the total across different categories.

    An image of a 100% stacked bar chart is shown below:
            

Using Code

This code shows how to add different types of bar charts in a spreadsheet.

JavaScript
Copy Code

  var chart_barClustered, chart_barStacked, chart_barStacked100, sheet;

        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
            sheet = spread.getActiveSheet();
            sheet.suspendPaint();

            //prepare data for chart
            sheet.setValue(0, 1, "Q1");
            sheet.setValue(0, 2, "Q2");
            sheet.setValue(0, 3, "Q3");
            sheet.setValue(1, 0, "Mobile Phones");
            sheet.setValue(2, 0, "Laptops");
            sheet.setValue(3, 0, "Tablets");
            for (var r = 1; r <= 3; r++) {
                for (var c = 1; c <= 3; c++) {
                    sheet.setValue(r, c, parseInt(Math.random() * 100));
                }
            }

//add barClustered chart
            chart_barClustered = sheet.charts.add('chart_barClustered', GC.Spread.Sheets.Charts.ChartType.barClustered, 250, 20, 600, 400, "A1:D4");

//add barStacked chart
            chart_barStacked = sheet.charts.add('chart_barStacked', GC.Spread.Sheets.Charts.ChartType.barStacked, 250, 480, 600, 400, "A1:D4");

//add barStacked100 chart
            chart_barStacked100 = sheet.charts.add('chart_barStacked100', GC.Spread.Sheets.Charts.ChartType.barStacked100, 250, 900, 600, 400, "A1:D4");

            sheet.resumePaint();
        };