Skip to main content

Introducing Formengine - The New Formbuilder, try for FREE formengine.io.

Chart components

All components in this section were created on the basis of the ChartJS library. These components are diagrams which display different types of data.

The following components are available:

  • Bar - bar chart provides a method of showing data values represented as vertical bars.
  • Line - line chart is a method of plotting data points on a line.
  • Scatter - scatter charts are based on basic line charts with the x-axis changed to a linear axis.
  • Doughnut - doughnut chart is represented by arcs that show the proportional value of each piece of data.
  • Pie - pie chart is represented by segments that show the proportional value of each piece of data.
  • Radar - radar chart is a method of showing multiple data points and the variation between them.

All components in this section have similar General properties, therefore let's describe them all in one go.

  • Title - title display.
  • Title size - title font size, number.
  • Legend position - position of legend block.
  • Responsive - adjust to the size of the container.
  • Dataset custom - if this checkbox is checked, simplified dataset mode is switched on. You can draw only one dataset in this mode. If this checkbox is unchecked, all data received by component is similar to data described in ChartJS documentation. The last three properties will work only if Dataset custom mode is on.
  • Data labels - data point titles.
  • Dataset Label - dataset title.
  • Dataset BackgroundColor - sets dataset display color. Use CSS color value.

Transmitting data to charts​

All components described in this section are bound to data. Data object property structure depends on component type Dataset custom mode status: on or off.

  • For Bar, Line, Doughnut, Pie, Radar components data will look the following:

    • If Dataset custom mode is off, data received by component fully match ChartJS format.

      var formData = {
          ...
          chartName : {
              labels: ["Q1", "Q2", "Q3", "Q4"],
              datasets: [
                  {
                      // you can specify any ChartJS Dataset property here,
                      // but the data property is required
                      data: [6, 23, 15, 3]
                  }
              ]
          }
          ...
      }

    • If Dataset custom mode is on, simplified data format will be used and dataset display (labels in particular) are set by the component properties.

      var formData = {
          ...
          chartName: [6, 23, 15, 3]
          ...
      }

  • For Scatter component this data will look the following:

    • If Dataset custom mode is off, data received by component fully match ChartJS format.

      var formData = {
          ...
          chartName : {
              labels: ["Q1", "Q2", "Q3", "Q4"],
              datasets: [
                  {
                      // you can specify any ChartJS Dataset property here,
                      // but the data property is required
                      data: [{x: 6, y: -12}, {x: 11, y: 1}, {x: 24, y: 5}, {x: 40, y: 32}]
                  }
              ]
          }
          ...
      }

    • If Dataset custom mode is on, simplified data format will be used and dataset display (labels in particular) are set by the component properties.

      var formData = {
          ...
          chartName: [{x: 6, y: -12}, {x: 11, y: 1}, {x: 24, y: 5}, {x: 40, y: 32}]
          ...
      }

formData here is form data object. See documentation on binding to understand how it works.

Chart components​

Chart components look as described below.

Bar​

Bar chart provides a method of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. Based on ChartJS Bar.

Line​

Line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. Based on ChartJS Line.

Scatter​

Scatter charts are based on basic line charts with the x-axis changed to a linear axis. Created on the basis of ChartJS Scatter.

Doughnut​

Doughnut chart is represented by arcs that show the proportional value of each piece of data. Based on ChartJS Doughnut.

Pie​

Pie chart is represented by segments that show the proportional value of each piece of data. Based on ChartJS Pie.

Radar​

Radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. Based on ChartJS Radar.