Your search did not match any results.
Charts

Overview

DevExtreme HTML5 JavaScript Charts is a collection of 30+ feature-rich Vue components for data visualization. This collection includes bars, areas, lines, bubbles, pie, funnels, sparklines, treemaps, and many other chart types. You can use Vue syntax and techniques to instantiate and configure the charts or handle their events. In addition, the components support prop validation. Find out more about DevExtreme Vue components.

Copy to CodeSandBox
Apply
Reset
<template> <dx-chart id="chart" :data-source="dataSource" palette="Harmony Light" title="Pizza Shop Complaints" > <dx-argument-axis> <dx-label overlapping-behavior="stagger"/> </dx-argument-axis> <dx-value-axis :tick-interval="300" name="frequency" position="left" /> <dx-value-axis :tick-interval="20" :show-zero="true" :value-margins-enabled="false" name="percentage" position="right" > <dx-label :customize-text="customizePercentageText"/> <dx-constant-line :value="80" :width="2" color="#fc3535" dash-style="dash" > <dx-label :visible="false"/> </dx-constant-line> </dx-value-axis> <dx-series name="Complaint frequency" value-field="count" axis="frequency" type="bar" color="#fac29a" /> <dx-series name="Cumulative percentage" value-field="cumulativePercentage" axis="percentage" type="spline" color="#6b71c3" /> <dx-tooltip :enabled="true" :shared="true" :customize-tooltip="customizeTooltip" /> <dx-legend vertical-alignment="top" horizontal-alignment="center" /> <dx-common-series-settings argument-field="complaint"/> </dx-chart> </template> <script> import DxChart, { DxArgumentAxis, DxCommonSeriesSettings, DxLabel, DxLegend, DxSeries, DxTooltip, DxValueAxis, DxConstantLine } from 'devextreme-vue/chart'; import { complaintsData } from './data.js'; export default { components: { DxChart, DxArgumentAxis, DxCommonSeriesSettings, DxLabel, DxLegend, DxSeries, DxTooltip, DxValueAxis, DxConstantLine }, data: function() { return { customizeTooltip: function(info) { return { html: `<div><div class='tooltip-header'>${ info.argumentText }</div><div class='tooltip-body'><div class='series-name'>${ info.points[0].seriesName }: </div><div class='value-text'>${ info.points[0].valueText }</div><div class='series-name'>${ info.points[1].seriesName }: </div><div class='value-text'>${ info.points[1].valueText }% </div></div></div>` }; }, customizePercentageText: function(info) { return `${info.valueText}%`; } }; }, computed: { dataSource() { let data = complaintsData.sort(function(a, b) { return b.count - a.count; }), totalCount = data.reduce(function(prevValue, item) { return prevValue + item.count; }, 0), cumulativeCount = 0; return data.map(function(item) { cumulativeCount += item.count; return { complaint: item.complaint, count: item.count, cumulativePercentage: Math.round(cumulativeCount * 100 / totalCount) }; }); } } }; </script> <style> #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; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
export 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 } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });