Functionality
Types of JavaScript charts and diagrams
You can choose from 14 types of charts to display data in a user-friendly way:
- 2D, 3D and donut pie charts to show proportions or parts of whole
- line and spline charts to depict dependent data that undergoes changes over time
- bar and stacked bar charts to compare values across multiple categories
- area charts, including stacked and spline area charts to draw the attention to the total value
- pie and radar charts to compare sets of values or show value ratio to the center point
Different types in one chart
With Webix Charts you can develop a chart that has line and bar series at the same time. You can also choose which chart series to hide or show by clicking on the chart's legend.
Sorting
Data in JavaScript Charts can be easily sorted according to the specified parameter and the sorting order.
Try to sort data in the chart
Filtering
You can filter data in Webix JavaScript graphs by using the corresponding Chart API. You will just need to define the data that should be filtered and set the filtering criteria.
Try to filter data in the chart
Customizable
JavaScript Charts can be customized to any desired look by changing their height, width, color, orientation and more.
Legend
The Charts legend is also easily customizable and allows you to identify and label each chart graph.
Stacked charts
Stacked charts come to your help if you need to analyze part-to-whole relationship within several notions that are compared.
Stacked Bar and Area Charts
JS Chart scales
Line, Spline, Bar, Area, and Scatter charts can be coupled with the scales. Scales consist of X and Y axes, and by default, they are formed automatically according to the used data set. Custom scale support allows creating a template for text label of each axis. By default the numeric scale is used and, if needed, you can enable the logarithmic scale. Also, you can add titles to the axes.
Style presets
There's a possibility to change the appearance of charts. Using style presets, you can allow users to switch the styles on the fly.
Try to change style type
Grouping
If the used data set consists of heterogeneous data, you may want to use the grouping feature. It allows visualizing portions of data united by a specific criterion.
Try to change the group of data
Adding and deleting items
Webix allows you to interact with charts in different ways. You can add new items to the existing chart or remove some of them.
Try to add or remove data from chart
Selecting Data Ranges
With the help of a Rangeсhart you can select certain data range from a large amount of data by using a movable frame. You can also link Rangechart to another Chart to put a limit on the data it displays.
Try to change the range
Drawing by Coordinates
Scatter chart is used for displaying items by coordinates. Items can be optionally connected into a line or a shape.
Dynamic Charts
If you want to demonstrate the change of data over time, you can use dynamic charts. The rendering of each item in these charts is animated. This task doesn't require any significant effort. If you already have a static chart, you can make it dynamic with a few lines of code.