Your search did not match any results.
Bar Charts

Custom Annotations

To customize an annotation, declare the SVG markup in the annotation template. Inside the template, you can access the annotation being customized.

en.wikipedia.org
Copy to CodeSandBox
Apply
Reset
<template> <svg class="annotation"> <image :href="getImagePath()" width="60" height="40" /> <text x="70" y="25" class="state" >{{ annotation.argument }}</text> <text x="0" y="60" > <tspan class="caption">Capital:</tspan><tspan dx="5">{{ data.capital }}</tspan><tspan dy="14" x="0" class="caption" >Population:</tspan><tspan dx="5">{{ formatNumber(data.population) }}</tspan><tspan dy="14" x="0" class="caption" >Area:</tspan><tspan dx="5">{{ formatNumber(data.area) }}</tspan><tspan dx="5">km</tspan><tspan class="sup" dy="-2" >2</tspan> </text> </svg> </template> <script> export default { props: { annotation: { type: Object, default: () => ({}) } }, data() { return { data: this.annotation.data }; }, methods: { getImagePath() { return `../../../../images/flags/${this.data.name.replace(/\s/, '').toLowerCase()}.gif`; }, formatNumber: new Intl.NumberFormat('en-US', { minimumFractionDigits: 0 }).format } }; </script> <style> .annotation { font-size: 12px; } .state { font-weight: 500; font-size: 14px; } .caption { font-weight: 500; } .sup { font-size: 0.8em; } </style>
<template> <div> <dx-chart id="chart" :data-source="populationData" title="Top 5 Most Populated States in US" > <dx-series type="bar" argument-field="name" value-field="population" name="Population" /> <dx-legend :visible="false" /> <dx-common-annotation-settings :allow-dragging="true" type="custom" series="Population" template="annotationTemplate" /> <dx-annotation v-for="data in populationData" :argument="data.name" :data="data" :key="data.name" /> <template #annotationTemplate="{ data }"> <annotation-template :annotation="data"/> </template> </dx-chart> </div> </template> <script> import { populationData } from './data.js'; import { DxChart, DxSeries, DxLegend, DxAnnotation, DxCommonAnnotationSettings } from 'devextreme-vue/chart'; import AnnotationTemplate from './AnnotationTemplate.vue'; export default { components: { DxChart, DxSeries, DxLegend, DxAnnotation, DxCommonAnnotationSettings, AnnotationTemplate }, data() { return { populationData: populationData }; } }; </script> <style scoped> #chart { height: 440px; } </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.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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"> </div> </div> </body> </html>
export const populationData = [{ name: 'California', population: 38802500, capital: 'Sacramento', area: 423967 }, { name: 'Texas', population: 26956958, capital: 'Austin', area: 695662 }, { name: 'Florida', population: 19893297, capital: 'Tallahassee', area: 170312 }, { name: 'New York', population: 19746227, capital: 'Albany', area: 141297 }, { name: 'Illinois', population: 12880580, capital: 'Springfield', area: 149995 }];
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 } });