JavaScript/jQuery Charts - Overview

DevExtreme JavaScript Charting library is a collection of 30+ responsive charts that enable you to transform data into an eye-catching and elegant visual representation. Line, area, bar, pie, funnel, pyramid, financial, range, and polar charts - this is just the tip of the iceberg. Every chart from this library is available as a jQuery plugin, supports binding to any data source, and provides its own distinctive feature set. Explore other demos in this section to find the chart for your next project.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the Charts features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { const data = complaintsData.sort((a, b) => b.count - a.count); const totalCount = data.reduce((prevValue, item) => prevValue + item.count, 0); let cumulativeCount = 0; const dataSource = data.map((item) => { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round((cumulativeCount * 100) / totalCount), }; }); $('#chart').dxChart({ palette: 'Harmony Light', dataSource, title: 'Pizza Shop Complaints', argumentAxis: { label: { overlappingBehavior: 'stagger', }, }, tooltip: { enabled: true, shared: true, customizeTooltip(info) { const content = ["<div><div class='tooltip-header'></div>", "<div class='tooltip-body'><div class='series-name'>", "<span class='top-series-name'></span>", ": </div><div class='value-text'>", "<span class='top-series-value'></span>", "</div><div class='series-name'>", "<span class='bottom-series-name'></span>", ": </div><div class='value-text'>", "<span class='bottom-series-value'></span>", '% </div></div></div>'].join(''); const htmlContent = $(content); htmlContent.find('.tooltip-header').text(info.argumentText); htmlContent.find('.top-series-name').text(info.points[0].seriesName); htmlContent.find('.top-series-value').text(info.points[0].valueText); htmlContent.find('.bottom-series-name').text(info.points[1].seriesName); htmlContent.find('.bottom-series-value').text(info.points[1].valueText); return { html: $('<div>').append(htmlContent).html(), }; }, }, valueAxis: [{ name: 'frequency', position: 'left', tickInterval: 300, }, { name: 'percentage', position: 'right', showZero: true, label: { customizeText(info) { return `${info.valueText}%`; }, }, constantLines: [{ value: 80, color: '#fc3535', dashStyle: 'dash', width: 2, label: { visible: false }, }], tickInterval: 20, valueMarginsEnabled: false, }], commonSeriesSettings: { argumentField: 'complaint', }, series: [{ type: 'bar', valueField: 'count', axis: 'frequency', name: 'Complaint frequency', color: '#fac29a', }, { type: 'spline', valueField: 'cumulativePercentage', axis: 'percentage', name: 'Cumulative percentage', color: '#6b71c3', }], legend: { verticalAlignment: 'top', horizontalAlignment: 'center', }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart-demo"> <div id="chart"></div> </div> </div> </body> </html>

#chart { height: 440px; } .tooltip-header { margin-bottom: 5px; font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 1px solid #c5c5c5; } .tooltip-body { width: 170px; } .tooltip-body .series-name { font-weight: normal; opacity: 0.6; display: inline-block; line-height: 1.5; padding-right: 10px; width: 126px; } .tooltip-body .value-text { display: inline-block; line-height: 1.5; width: 30px; }

const complaintsData = [ { complaint: 'Cold pizza', count: 780 }, { complaint: 'Not enough cheese', count: 120 }, { complaint: 'Underbaked or Overbaked', count: 52 }, { complaint: 'Delayed delivery', count: 1123 }, { complaint: 'Damaged pizza', count: 321 }, { complaint: 'Incorrect billing', count: 89 }, { complaint: 'Wrong size delivered', count: 222 }, ];

NOTE

Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.

The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.

The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).

The Web Dashboard is available as a part of a Universal subscription.

Get Started with DevExpress BI Dashboard | Explore Demos