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
import React from 'react'; function getImagePath(data) { return `../../../../images/flags/${data.name.replace(/\s/, '').toLowerCase()}.gif`; } const formatNumber = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0 }).format; export default function AnnotationTemplate(annotation) { const data = annotation.data; return ( <svg className="annotation"> <image href={getImagePath(data)} width="60" height="40" /> <text x="70" y="25" className="state">{annotation.argument}</text> <text x="0" y="60"> <tspan className="caption">Capital:</tspan> <tspan dx="5">{data.capital}</tspan> <tspan dy="14" x="0" className="caption">Population:</tspan> <tspan dx="5">{formatNumber(data.population)}</tspan> <tspan dy="14" x="0" className="caption">Area:</tspan> <tspan dx="5">{formatNumber(data.area)}</tspan> <tspan dx="5">km</tspan> <tspan className="sup" dy="-2">2</tspan> </text> </svg> ); }
import React from 'react'; import Chart, { Series, Annotation, Legend, CommonAnnotationSettings } from 'devextreme-react/chart'; import { populationData } from './data.js'; import AnnotationTemplate from './AnnotationTemplate.js'; class App extends React.Component { render() { return ( <Chart id="chart" dataSource={populationData} title="Top 5 Most Populated States in US" > <Series type="bar" argumentField="name" valueField="population" name="Population" > </Series> <CommonAnnotationSettings type="custom" series="Population" render={AnnotationTemplate} allowDragging={true} > </CommonAnnotationSettings> {populationData.map(data => { return ( <Annotation argument={data.name} key={data.name} data={data} > </Annotation> ); })} <Legend visible={false}></Legend> </Chart> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('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" /> <link rel="stylesheet" type="text/css" href="styles.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>
#chart { height: 440px; } .annotation { font-size: 12px; } .state { font-weight: 500; font-size: 14px; } .caption { font-weight: 500; } .sup { font-size: 0.8em; }
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/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@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', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });