Chart Types

Here we speak about various Webix chart types that you have 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, Donut and 3D Donut Charts

Initialization

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

If you want to make a multilevel Pie chart, use the multilevel property.

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"
    ...
})

Settings for Line Charts

Bar, BarH, StackedBar and StackedBarH Charts

Initialization

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

Settings for Bar Charts

Area and stackedArea Charts

Initialization

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

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",
    ...
})

Settings for Scatter Chart