Chart Types

Here we speak about various chart types at your disposal. Basically, you should set the type property of the chart constructor to the necessary value to switch to the corresponding chart type.

Pie, 3D Pie Chart and Donut Charts

Initialization

webix.ui({
    view: "chart",
    type:"pie", //or "pie3D", "donut"
    ...
})

Related sample:  Pie Chart: Basic Initialization

Settings for Pie Charts

Line and Spline Charts

Line chart features a broken line to join the points while a spline chart has a curved one.

Initialization

webix.ui({
    view:"chart",
    type:"line" //or "spline"
    ...
})

Related sample:  Line Chart: Basic Initialization

Settings for Line Charts

Bar, BarH, StackedBar and StackedBarH Charts

Initialization

webix.ui({
    view:"chart",
    type:"bar" //or "barH", "stackedBar", "stackedBarH"
    ...
})

Related sample:  Bar Chart: Basic Initialization

Settings for Bar Charts

Area and stackedArea Charts

Initialization

webix.ui({
    view:"chart",
    type:"area", //or stackedArea
    ...
})

Related sample:  Area Chart: Basic Initialization

SplineArea Chart

Initialization

webix.ui({
    view:"chart",
    type:"splineArea", 
    ...
})

Related sample:  SplineArea

Setting for Area Charts

Radar Charts

Initialization

webix.ui({
    view:"chart",
    type:"radar",
    ...
})

Related sample:  Radar Chart: Points

Settings for Radar Chart

Scatter Charts

Initialization

webix.ui({
    view:"chart",
    type:"scatter",
    ...
})

Related sample:  Scatter Chart: Basic Initialization

Settings for Scatter Chart

Back to top