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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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.2.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/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.2',
'devextreme-vue': 'npm:devextreme-vue@19.2',
jszip: 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'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
}
});