If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import PieChart, {
Series,
Legend,
} from 'devextreme-react/pie-chart';
import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
import { getPalette } from 'devextreme/viz/palette';
import {
paletteCollection, paletteExtensionModes, dataSource, paletteLabel, paletteExtensionLabel,
} from './data.ts';
function App() {
const [palette, setPalette] = useState(paletteCollection[0]);
const [extensionMode, setExtensionMode] = useState(paletteExtensionModes[1]);
const handlePaletteChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
setPalette(e.value);
}, [setPalette]);
const handleExtensionModeChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
setExtensionMode(e.value);
}, [setExtensionMode]);
return (
<React.Fragment>
<div className="flex-container">
<PieChart
id="pie"
dataSource={dataSource}
palette={palette}
paletteExtensionMode={extensionMode}
>
<Legend visible={false} />
<Series />
</PieChart>
<div className="palette-container flex-block">
{getPalette(palette).simpleSet.map((color) => (
<div
className="palette-item"
style={{ backgroundColor: color }}
key={color}
/>
))}
</div>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="options-container">
<div className="option">
<span>Palette </span>
<SelectBox
items={paletteCollection}
inputAttr={paletteLabel}
defaultValue={palette}
onValueChanged={handlePaletteChange}
/>
</div>
<div className="option">
<span>Palette Extension Mode </span>
<SelectBox
items={paletteExtensionModes}
inputAttr={paletteExtensionLabel}
defaultValue={extensionMode}
onValueChanged={handleExtensionModeChange}
/>
</div>
</div>
</div>
</React.Fragment>
);
}
export default App;
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import PieChart, { Series, Legend } from 'devextreme-react/pie-chart';
import SelectBox from 'devextreme-react/select-box';
import { getPalette } from 'devextreme/viz/palette';
import {
paletteCollection,
paletteExtensionModes,
dataSource,
paletteLabel,
paletteExtensionLabel,
} from './data.js';
function App() {
const [palette, setPalette] = useState(paletteCollection[0]);
const [extensionMode, setExtensionMode] = useState(paletteExtensionModes[1]);
const handlePaletteChange = useCallback(
(e) => {
setPalette(e.value);
},
[setPalette],
);
const handleExtensionModeChange = useCallback(
(e) => {
setExtensionMode(e.value);
},
[setExtensionMode],
);
return (
<React.Fragment>
<div className="flex-container">
<PieChart
id="pie"
dataSource={dataSource}
palette={palette}
paletteExtensionMode={extensionMode}
>
<Legend visible={false} />
<Series />
</PieChart>
<div className="palette-container flex-block">
{getPalette(palette).simpleSet.map((color) => (
<div
className="palette-item"
style={{ backgroundColor: color }}
key={color}
/>
))}
</div>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="options-container">
<div className="option">
<span>Palette </span>
<SelectBox
items={paletteCollection}
inputAttr={paletteLabel}
defaultValue={palette}
onValueChanged={handlePaletteChange}
/>
</div>
<div className="option">
<span>Palette Extension Mode </span>
<SelectBox
items={paletteExtensionModes}
inputAttr={paletteExtensionLabel}
defaultValue={extensionMode}
onValueChanged={handleExtensionModeChange}
/>
</div>
</div>
</div>
</React.Fragment>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
import { Palette } from 'devextreme/viz/pie_chart';
import { PaletteExtensionMode } from 'devextreme/common/charts';
export const paletteCollection: Palette[] = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
export const paletteExtensionModes: PaletteExtensionMode[] = ['alternate', 'blend', 'extrapolate'];
const data: ({ arg: string; val: number; })[] = [];
for (let i = 0; i < 20; i += 1) {
data.push({
arg: `item${i}`,
val: 1,
});
}
export const dataSource = data;
export const paletteLabel = { 'aria-label': 'Palette' };
export const paletteExtensionLabel = { 'aria-label': 'Palette Extension Mode' };
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';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const paletteCollection = [
'Material',
'Soft Pastel',
'Harmony Light',
'Pastel',
'Bright',
'Soft',
'Ocean',
'Office',
'Vintage',
'Violet',
'Carmine',
'Dark Moon',
'Soft Blue',
'Dark Violet',
'Green Mist',
];
export const paletteExtensionModes = ['alternate', 'blend', 'extrapolate'];
const data = [];
for (let i = 0; i < 20; i += 1) {
data.push({
arg: `item${i}`,
val: 1,
});
}
export const dataSource = data;
export const paletteLabel = { 'aria-label': 'Palette' };
export const paletteExtensionLabel = { 'aria-label': 'Palette Extension Mode' };
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#pie {
height: 350px;
width: 500px;
margin: 20px;
}
.palette-container {
float: left;
}
.palette-item {
width: 40px;
height: 40px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
display: inline-block;
min-width: 320px;
margin-top: 5px;
}
.option > span {
margin: 0 10px 0 0;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
.options-container {
display: flex;
align-items: center;
}
.options-container > .option {
display: flex;
align-items: baseline;
}
Specify a Palette
A palette is a set of colors that mix well with each other. To apply the needed color scheme, you can assign it to the palette property. It accepts either the name of a predefined palette or an array of colors. In this demo, you can use the "Palette" selector to apply a new set of colors.
Extend a Palette
When the number of palette colors is less than the number of series points, you can use the paletteExtensionMode property to specify how to extend the palette. This property can accept one of the following values:
-
"blend"
Create a blend of two neighboring colors and insert it between these colors in the palette. -
"alternate"
Repeat the full set of palette colors, alternating their normal, lightened, and darkened shades in that order. -
"extrapolate"
Repeat the full set of palette colors, changing their shade gradually from dark to light.
In this demo, you can use the "Palette Extension Mode" selector to apply one of these modes.