Your search did not match any results.
Charts

Overview

DevExtreme JavaScript Charts are adaptive client-side UI components for visualizing data available for Knockout. They provide more than 30 different chart types: from basic line and bar charts to bullets, sparklines, and treemaps. Many chart types can be combined, like bar and line charts in this demo. Discover other chart features, like the legend, zooming and scrolling, strips, in other demos from this section.

Backend API
Copy to CodePen
Apply
Reset
window.onload = function () { 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), }; }); const viewModel = { chartOptions: { palette: 'Harmony Light', dataSource, title: 'Pizza Shop Complaints', argumentAxis: { label: { overlappingBehavior: 'stagger', }, }, tooltip: { enabled: true, shared: true, customizeTooltip(info) { const tmpContainer = document.createElement('div'); tmpContainer.innerHTML = ["<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(''); tmpContainer.querySelector('.tooltip-header').textContent = info.argumentText; tmpContainer.querySelector('.top-series-name').textContent = info.points[0].seriesName; tmpContainer.querySelector('.top-series-value').textContent = info.points[0].valueText; tmpContainer.querySelector('.bottom-series-name').textContent = info.points[1].seriesName; tmpContainer.querySelector('.bottom-series-value').textContent = info.points[1].valueText; return { html: tmpContainer.innerHTML, }; }, }, 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', }, }, }; ko.applyBindings(viewModel, document.getElementById('chart-demo')); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.2.5/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" data-bind="dxChart: chartOptions"></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 }, ];