Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
import React from 'react';
import PieChart, {
CommonAnnotationSettings,
Annotation,
Image,
Border,
Shadow,
Series,
Label,
Font,
Tooltip,
Legend,
} from 'devextreme-react/pie-chart';
import { dataSource, getAnnotationSources } from './data.ts';
import TooltipTemplate from './TooltipTemplate.tsx';
const annotationSources = getAnnotationSources();
function App() {
return (
<PieChart
id="pie"
palette="Vintage"
dataSource={dataSource}
title="Ice Hockey World Championship Gold Medal Winners"
>
<CommonAnnotationSettings
type="image"
color="transparent"
paddingLeftRight={0}
paddingTopBottom={0}
tooltipRender={TooltipTemplate}
>
<Image
height={60}
width={90}
/>
<Border color="transparent" />
</CommonAnnotationSettings>
{
annotationSources.map((item) => (
<Annotation
key={item.country}
argument={item.country}
data={item.data}
location={item.location}
offsetX={item.offsetX}
offsetY={item.offsetY}
color={item.color}>
<Image url={item.image} />
<Border color={item.borderColor} />
<Shadow opacity={item.shadowOpacity} />
</Annotation>
))
}
<Series
argumentField="country"
valueField="gold">
<Label
visible
position="inside"
radialOffset={83}
backgroundColor="transparent">
<Font
size={16}
weight={600}
/>
</Label>
</Series>
<Tooltip
paddingLeftRight={12}
paddingTopBottom={10}
/>
<Legend visible={false} />
</PieChart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import PieChart, {
CommonAnnotationSettings,
Annotation,
Image,
Border,
Shadow,
Series,
Label,
Font,
Tooltip,
Legend,
} from 'devextreme-react/pie-chart';
import { dataSource, getAnnotationSources } from './data.js';
import TooltipTemplate from './TooltipTemplate.js';
const annotationSources = getAnnotationSources();
function App() {
return (
<PieChart
id="pie"
palette="Vintage"
dataSource={dataSource}
title="Ice Hockey World Championship Gold Medal Winners"
>
<CommonAnnotationSettings
type="image"
color="transparent"
paddingLeftRight={0}
paddingTopBottom={0}
tooltipRender={TooltipTemplate}
>
<Image
height={60}
width={90}
/>
<Border color="transparent" />
</CommonAnnotationSettings>
{annotationSources.map((item) => (
<Annotation
key={item.country}
argument={item.country}
data={item.data}
location={item.location}
offsetX={item.offsetX}
offsetY={item.offsetY}
color={item.color}
>
<Image url={item.image} />
<Border color={item.borderColor} />
<Shadow opacity={item.shadowOpacity} />
</Annotation>
))}
<Series
argumentField="country"
valueField="gold"
>
<Label
visible
position="inside"
radialOffset={83}
backgroundColor="transparent"
>
<Font
size={16}
weight={600}
/>
</Label>
</Series>
<Tooltip
paddingLeftRight={12}
paddingTopBottom={10}
/>
<Legend visible={false} />
</PieChart>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
interface AnnotationData {
country: string,
oldCountryName: string,
gold: number,
silver: number,
bronze: number,
}
export default function TooltipTemplate(annotation: { data: AnnotationData; }) {
const { data } = annotation;
return (
<div className='medal-tooltip'>
<div className='country-name'>{data.country}
{data.oldCountryName && <br />}{data.oldCountryName}
</div>
<div className='gold'>
<span className='caption'>Gold</span>: {data.gold}
</div>
<div className='silver'>
<span className='caption'>Silver</span>: {data.silver}
</div>
<div className='bronze'>
<span className='caption'>Bronze</span>: {data.bronze}
</div>
</div>
);
}
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
const annotationSources = [{
country: 'Russia',
offsetX: 15,
offsetY: 5,
}, {
country: 'Canada',
offsetY: 10,
}, {
country: 'Czech Republic',
offsetX: -5,
offsetY: -35,
}, {
country: 'Sweden',
offsetX: 20,
offsetY: -25,
}, {
country: 'Finland',
location: 'edge',
offsetX: 45,
offsetY: -85,
}, {
country: 'United States',
location: 'edge',
offsetX: 85,
offsetY: -45,
}, {
country: 'Great Britain',
location: 'edge',
offsetX: 81,
offsetY: 15,
}, {
country: 'Slovakia',
location: 'edge',
offsetX: 45,
offsetY: 80,
}];
const edgeAnnotationSettings = {
color: '#aaaaaa',
borderColor: '#aaaaaa',
shadowOpacity: 0.3,
};
export const dataSource = [{
country: 'Russia',
oldCountryName: 'Soviet Union',
gold: 27,
silver: 10,
bronze: 10,
}, {
country: 'Canada',
gold: 26,
silver: 15,
bronze: 9,
}, {
country: 'Czech Republic',
oldCountryName: 'Czechoslovakia',
gold: 12,
silver: 13,
bronze: 21,
}, {
country: 'Sweden',
gold: 11,
silver: 19,
bronze: 17,
}, {
country: 'Finland',
gold: 3,
silver: 8,
bronze: 3,
}, {
country: 'United States',
gold: 2,
silver: 9,
bronze: 8,
}, {
country: 'Great Britain',
gold: 1,
silver: 2,
bronze: 2,
}, {
country: 'Slovakia',
gold: 1,
silver: 2,
bronze: 1,
}];
export function getAnnotationSources() {
const annotations = [];
for (let i = 0; i < annotationSources.length; i += 1) {
const annotation = annotationSources[i];
const { country } = annotation;
const image = `images/flags/3x2/${country.replace(/\s/, '')}.svg`;
const data = { dataSource.filter((d) => (d.country === country))[0] };
annotations.push({
annotation,
image,
data,
annotation.location === 'edge' ? edgeAnnotationSettings : {}), (
});
}
return annotations;
}
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
export default function TooltipTemplate(annotation) {
const { data } = annotation;
return (
<div className="medal-tooltip">
<div className="country-name">
{data.country}
{data.oldCountryName && <br />}
{data.oldCountryName}
</div>
<div className="gold">
<span className="caption">Gold</span>: {data.gold}
</div>
<div className="silver">
<span className="caption">Silver</span>: {data.silver}
</div>
<div className="bronze">
<span className="caption">Bronze</span>: {data.bronze}
</div>
</div>
);
}
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
const annotationSources = [
{
country: 'Russia',
offsetX: 15,
offsetY: 5,
},
{
country: 'Canada',
offsetY: 10,
},
{
country: 'Czech Republic',
offsetX: -5,
offsetY: -35,
},
{
country: 'Sweden',
offsetX: 20,
offsetY: -25,
},
{
country: 'Finland',
location: 'edge',
offsetX: 45,
offsetY: -85,
},
{
country: 'United States',
location: 'edge',
offsetX: 85,
offsetY: -45,
},
{
country: 'Great Britain',
location: 'edge',
offsetX: 81,
offsetY: 15,
},
{
country: 'Slovakia',
location: 'edge',
offsetX: 45,
offsetY: 80,
},
];
const edgeAnnotationSettings = {
color: '#aaaaaa',
borderColor: '#aaaaaa',
shadowOpacity: 0.3,
};
export const dataSource = [
{
country: 'Russia',
oldCountryName: 'Soviet Union',
gold: 27,
silver: 10,
bronze: 10,
},
{
country: 'Canada',
gold: 26,
silver: 15,
bronze: 9,
},
{
country: 'Czech Republic',
oldCountryName: 'Czechoslovakia',
gold: 12,
silver: 13,
bronze: 21,
},
{
country: 'Sweden',
gold: 11,
silver: 19,
bronze: 17,
},
{
country: 'Finland',
gold: 3,
silver: 8,
bronze: 3,
},
{
country: 'United States',
gold: 2,
silver: 9,
bronze: 8,
},
{
country: 'Great Britain',
gold: 1,
silver: 2,
bronze: 2,
},
{
country: 'Slovakia',
gold: 1,
silver: 2,
bronze: 1,
},
];
export function getAnnotationSources() {
const annotations = [];
for (let i = 0; i < annotationSources.length; i += 1) {
const annotation = annotationSources[i];
const { country } = annotation;
const image = `images/flags/3x2/${country.replace(/\s/, '')}.svg`;
const data = { dataSource.filter((d) => d.country === country)[0] };
annotations.push({
annotation,
image,
data,
annotation.location === 'edge' ? edgeAnnotationSettings : {}), (
});
}
return annotations;
}
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
#pie {
height: 440px;
}
.medal-tooltip {
font-size: 12px;
}
.medal-tooltip .country-name {
font-size: 14px;
font-weight: 700;
margin: 5px 0 10px 0;
}
.medal-tooltip .caption {
font-weight: 600;
}
You can set each annotation type property to "text", "image", or "custom". In this demo, the type used for all annotations is "image".
Annotations can deliver more information if you add tooltips. A tooltip appears when users hover the mouse pointer over an annotation. This demo illustrates how you can implement a tooltip with custom content via the tooltipTemplate property.
For more information on annotation settings, refer to the annotations[] help topic.