DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Palette

The PieChart, like other DevExtreme Data Visualization components, allows you to apply multiple predefined palettes. In this demo, you can use two drop-down menus under the PieChart to choose a palette and change the way it is extended when the number of colors is insufficient to paint each series point differently.

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.

Backend API
<template> <div> <div class="flex-container"> <DxPieChart id="pie" :data-source="dataSource" :palette="palette" :palette-extension-mode="paletteExtensionMode" > <DxLegend :visible="false"/> <DxSeries/> </DxPieChart> <div class="palette-container flex-block"> <div v-for="color in baseColors" :key="color" :style="{ 'background-color': color }" class="palette-item" /> </div> </div> <div class="options"> <div class="caption">Options</div> <div class="options-container"> <div class="option"> <span>Palette</span> <DxSelectBox :items="paletteCollection" :input-attr="{ 'aria-label': 'Palette' }" v-model:value="palette" /> </div> <div class="option"> <span>Palette Extension Mode</span> <DxSelectBox :items="paletteExtensionModes" :input-attr="{ 'aria-label': 'Palette Extension Mode' }" v-model:value="paletteExtensionMode" /> </div> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import DxPieChart, { DxSeries, DxLegend, } from 'devextreme-vue/pie-chart'; import DxSelectBox from 'devextreme-vue/select-box'; import { getPalette } from 'devextreme/viz/palette'; import { paletteCollection, paletteExtensionModes, dataSource } from './data.ts'; const palette = ref(paletteCollection[0]); const paletteExtensionMode = ref(paletteExtensionModes[1]); const baseColors = computed(() => getPalette(palette.value).simpleSet); </script> <style> .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; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/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@7.4.11/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', '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.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, '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, }, }; System.config(window.config);
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;
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.2.4/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.3.4/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>