20% Off All Froala Plans

Days

Hours

Minutes

Seconds

x

Bar Chart

Bar charts represent data with rectangular horizontal bars. The lenght of the bars is proportional to the values they represent. In bar charts, the numeric values are plotted along the x-axis, and the data labels are plotted along the y-axis. Bar charts are best fitted when you want to compare values.

Caption

The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it

Subcaption

The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.

Data Plot

Data plot refers to the pie slices in a pie chart, columns of the column chart, lines in a line chart.

Legend

A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.

X-Axis

X-Axis refers to a line on a chart that runs horizontally (left-right).

Y-Axis

Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero.

Export menu is hamburger menu that appears on top-right of the chart, it offers different options to export a chart.

You can enable or disable chart export using attribute exportEnabled. Refer to Exporting Charts to learn more.

Create a Bar chart

Let's create bar chart showcasing the split of visitors for the previous year and the current year. The bars for both datasets, one for the previous year and one for the current year, have been rendered using different colors. This makes it easy to interpret and compare the data.

For a detailed list of attributes, refer to the bar chart attributes page.

CHART

JSON

{
  "chart": {
    "caption": "Split of visitors by Channels",
    "placevaluesinside": "1",
    "showvalues": "0",
    "plottooltext": "$dataValue visitors from $label in $seriesName",
    "theme": "froala"
  },
  "categories": [
    {
      "category": [
        {
          "label": "Organic"
        },
        {
          "label": "Offline Stores"
        },
        {
          "label": "Email Campaigns"
        },
        {
          "label": "Social Events"
        },
        {
          "label": "Paid Channels"
        }
      ]
    }
  ],
  "dataset": [
    {
      "seriesname": "2017",
      "data": [
        {
          "value": "17000"
        },
        {
          "value": "19500"
        },
        {
          "value": "12500"
        },
        {
          "value": "14500"
        },
        {
          "value": "17500"
        }
      ]
    },
    {
      "seriesname": "2018",
      "data": [
        {
          "value": "25400"
        },
        {
          "value": "29800"
        },
        {
          "value": "21800"
        },
        {
          "value": "19500"
        },
        {
          "value": "21200"
        }
      ]
    }
  ],
  "trendlines": [
    {
      "line": [
        {
          "startvalue": "16200",
          "color": "#5D62B5",
          "thickness": "1.5",
          "displayvalue": "2017's Avg."
        },
        {
          "startvalue": "23500",
          "color": "#29C3BE",
          "thickness": "1.5",
          "displayvalue": "2018's Avg."
        }
      ]
    }
  ]
}

HTML

<html>

<head>
  <title>My first chart using FroalaCharts</title>
  <script src="https://unpkg.com/[email protected]/froalacharts.js"></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>
  <script type="text/javascript">
  var data = {
    chart: {
      caption: "Split of visitors by Channels",
      placevaluesinside: "1",
      showvalues: "0",
      plottooltext: "$dataValue visitors from $label in $seriesName",
      theme: "froala"
    },
    categories: [{
      category: [{
        label: "Organic"
      }, {
        label: "Offline Stores"
      }, {
        label: "Email Campaigns"
      }, {
        label: "Social Events"
      }, {
        label: "Paid Channels"
      }]
    }],
    dataset: [{
      seriesname: "2017",
      data: [{
        value: "17000"
      }, {
        value: "19500"
      }, {
        value: "12500"
      }, {
        value: "14500"
      }, {
        value: "17500"
      }]
    }, {
      seriesname: "2018",
      data: [{
        value: "25400"
      }, {
        value: "29800"
      }, {
        value: "21800"
      }, {
        value: "19500"
      }, {
        value: "21200"
      }]
    }],
    trendlines: [{
      line: [{
        startvalue: "16200",
        color: "#5D62B5",
        thickness: "1.5",
        displayvalue: "2017's Avg."
      }, {
        startvalue: "23500",
        color: "#29C3BE",
        thickness: "1.5",
        displayvalue: "2018's Avg."
      }]
    }]
  };
  FroalaCharts.ready(function() {
    new FroalaCharts({
      id: "chart_1",
      type: 'bar',
      renderAt: 'ft',
      width: '800',
      height: '500',
      dataSource: data
    }).render();
  });
  </script>
</head>
<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
  <div id="ft">FroalaCharts will render here</div>
</body>

</html>