Chart

API Reference

Overview

Chart is a UI-related component that inherits from view and helps present data in different graphic figures like colored columns, pie pieces or lines. Like all the data-presenting components it takes initial data in various formats.

In case you have huge volumes of data to work with and need to render a certain chunk of data in detail, the RangeChart component will come to the aid.

Initialization

The most important chart properties include type, template and value for data as well as criteria for data presenting (e.g. step of X axis in a bar chart). Specify the chart ID if you are going to work with it later.

Initialization of a Bar Chart

 webix.ui({
    view:"chart",
    type:"bar",
    value:"#sales#",
    color:"#f6960a",
    border:true,
    xAxis:{
        template:"'#year#"
    },
    yAxis:{
        start:0,
        end:100,
        step:10
    },
    data: dataset
});

Related sample: Chart: XML Dataset

To learn about all the chart properties, please refer to the corresponding chapter of the manual.

Chart

API Reference

Overview

Initialization

Working with Chart

Related Articles