Javascript Charts UI Widget

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

Types of JavaScript Charts and Diagrams

You can choose from 14 types of JavaScript graphs to display data in a user-friendly way:

  • 2D and 3D pie to show proportions
  • donut chart to show proportions when there are multiple series of data
  • column, including clustered, stacked and bar charts to compare values across a few categories or parts of whole
  • area grahps, including stacked and spline area charts to draw the attention to the total value
  • scatter and radar diagrams to compare sets of values or show value ratio to the center point

Types of JavaScript Charts and diagrams

Different Types on One GraphView Demo

With Webix JavaScript Charts widget, you can develop a graph that has a 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.

Different Types on One JavaScript Chart
View demo

SortingView Demo

Data in JavaScript Graph can be easily sorted according to the specified parameter and the sorting order.

Sorting in javascript graph
View demo

Filtering in JavaScript GraphsView Demo

You can filter data by clicking on the buttons with filtering features.

Filtering in javascript graphs
View demo

CustomizableView Demo

JavaScript Charts can be customized to any desired look by changing their height, width, color, orientation and more.

Customizable JavaScript Charts
View demo

LegendView Demo

The JavaScript graphs legend is also easily customizable and allows you to identify identify and label each chart graph.

JS Charts Legend
View demo

RangechartView Demo

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 component, for example Chart, to put a limit on the data it displays.

Rangechart from JavaScript Graphing Library
View demo

Graph ScalesView Demo

Line, Spline, Bar, Area, and Scatter diagrams can be displayed along 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. Thus, you can define which numeric values will be displayed. By default, the numeric scale is used. In the case of need, you can enable the logarithmic scale. Also, you can add titles to the axes.

Style presetsView Demo

There's a possibility to change the appearance of graphs. Using style presets, you can allow users to switch the styles on-the-fly.

GroupingView Demo

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.

Adding and deleting itemsView Demo

Webix allows you to interact with diagrams in different ways. You can add new items to the existing diagram or remove the particular ones of them.

Dynamic JS ChartsView Demo

If you want to demonstrate the change of data over time, you can use dynamic diagrams. The rendering of each item in these diagrams is animated. This task doesn't require any significant effort. If you already have a static graph, you can make it dynamic with a few lines of code.

Browsers Compatibility

JavaScript Charts widget allows you to present multiple data sets on one diagram across various browsers such as IE8+, Mozilla Firefox, Opera, Chrome and Safari.

Ready for Touch Devices

All JavaScript Graphs support native data mapping and accurately operates on all touch devices. Native touch events run smoothly and naturally.

Support for Popular Data Formats

The JavaScript Graph UI widget can load data from XML, JSON, JSArray and CSV formats.

Javascript Graphing Library Integration with Frameworks

Webix Graphs can be integrated with Angular, jQuery, React, Vue.js, Backbone frameworks.

Accessibility

JavaScript graphing library meets the main requirements of the accessable standards: additional semantics in markup, keyboard navigation, enhanced visibility mode.

Windows and Popups
Uploader