JavaScript Charts UI widgets

JavaScript Charts widget that includes such popular chart types as line, spline, area, bar, pie, 3D-pie, donut, scatter, and radar. You can define the chart appearance by changing the design of all its elements, including the tooltip, color, scale, template and more.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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
  • scatter 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.