Charts

Charts are based on ChartJS.

Bar

A bar chart provides a way 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.

Original control

Bar

Properties:

Property Description
Name Name
Title Title
Title size Title size
Legend position Position of the legend block
Responsive Adjust to the size of the container
Dataset custom Static labels
Data labels Labels of data
Dataset label A set of labels
Dataset BackgroundColor Background color

Events: none

Value

You need to set the value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [6, 23, 15, 3]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]

Line

A 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.

Original control

Line

Properties:

Property Description
Name Name
Title Title
Title size Title size
Legend position Position of the legend block
Responsive Adjust to the size of the container
Dataset custom Static labels
Data labels Labels of data
Dataset label A set of labels
Dataset BackgroundColor Background color

Events: none

Value

You need to set the value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [6, 23, 15, 3]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]

Scatter

Scatter charts are based on basic line charts with the x axis changed to a linear axis.

Original control

Scatter

Properties:

Property Description
Name Name
Title Title
Title size Title size
Legend position Position of the legend block
Responsive Adjust to the size of the container
Dataset custom Static labels
Data labels Labels of data
Dataset label A set of labels
Dataset BackgroundColor Background color

Events: none

Value

You need to set the value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [ 
            {x:6, y:-12}, 
            {x:11, y:1}, 
            {x:24, y:5},
            {x:40, y:32}
        ]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]

Doughnut

A doughnut chart is represented by arcs that show the proportional value of each piece of data.

Original control

Doughnut

Properties:

Events: none

Value

You need to set the value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [6, 23, 15, 3]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]

Pie

A pie chart is represented by segments that show the proportional value of each piece of data.

Original control

Pie

Properties:

Property Description
Name Name
Title Title
Title size Title size
Legend position Position of the legend block
Responsive Adjust to the size of the container
Dataset custom Static labels
Data labels Labels of data
Dataset label A set of labels
Dataset BackgroundColor Background color

Events: none

Value

You need to set the value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [6, 23, 15, 3]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]

Radar

A 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.

Original control

Radar

Properties:

Property Description
Name Name
Title Title
Title size Title size
Legend position Position of legend block
Responsive Adjust to the size of the container
Dataset custom Static labels
Data labels Labels of data
Dataset label A set of labels
Dataset BackgroundColor Background color

Events: none

Value

You need to set value of the control like this:

{
    labels: ["Q1", "Q2", "Q3", "Q4"],
    datasets: [{
        data: [6, 23, 15, 3]
    }]
}

If the Dataset custom flag is checked:

[1, 2, 3, 4, 3, 2, 1]