Webix offers an HTML5/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.

Types of JavaScript charts and diagrams

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

  • 2D and 3D pie to show proportions
  • doughnut 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 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

Types of JavaScript charts and diagrams

Support for Popular Data Formats

Webix Charts can load data from XML, JSON, JSArray and CSV formats with ease. Due to the high customizability of XML and JSON data formats, you can use the Chart with your existing web services.

Different Types on One ChartView Demo

With Webix Charts, you can develop a chart 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 Chart
View demo

SortingView Demo

The data on these JavaScript Charts can be easily sorted according to particular parameters by clicking on special inbuilt buttons.

Sorting in Webix Charts
View demo

FilteringView Demo

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

Filtering in Webix Chart
View demo

CustomizableView Demo

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

customizable webix charts
View demo

LegendView Demo

The Charts legend is also easily customizable and allows you to identify the data from each chart variable clearly.

Webix Chart Legend
View demo

RangechartView Demo

With a help of a Rangeсhart you can select certain data range by moving the frame on a scale X. You can also use the Rangechart in order to download selected data to another component, for example Chart.

View demo

Browsers Compatibility

This incredible Webix JavaScript widget allows you to present multiple data sets on one chart across various browsers such as IE10, Mozilla Firefox, Opera, Chrome and Safari.

Ready for Touch Devices

Webix Charts support native data mapping and accurately operates on all touch devices. Native touch events run smoothly and naturally.

Windows and Popups
Development Tools