Your search did not match any results.
Documentation

The PieChart, like other DevExtreme data visualization widgets, provides several built-in palettes. In this demo, you can use the drop-down menus under the widget to choose a palette and change how it is extended when it has an insufficient number of colors.

<div class="flex-container"> @(Html.DevExtreme().PieChart() .ID("pie") .ElementAttr("class", "flex-block") .Palette(VizPalette.Material) .PaletteExtensionMode(VizPaletteExtensionMode.Blend) .Series(s => s.Add()) .Legend(l => l.Visible(false)) .DataSource( Enumerable.Repeat(1, 20) .ToList() .Select((val, index) => { return new { val = val, arg = String.Format("Item{0}", index) }; }) ) .OnDrawn(@<text> function(e) { var paletteName = e.component.option("palette"), palette = DevExpress.viz.getPalette(paletteName).simpleSet, paletteContainer = $(".palette-container"); paletteContainer.html(""); palette.forEach(function(color) { $("<div>").css({ backgroundColor: color }) .addClass("palette-item") .appendTo(paletteContainer); }); } </text>) ) <div class="palette-container flex-block"></div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Palette</span> @(Html.DevExtreme().SelectBox() .Value("Material") .Items(new string[] { "Material", "Soft Pastel", "Harmony Light", "Pastel", "Bright", "Soft", "Ocean", "Office", "Vintage", "Violet", "Carmine", "Dark Moon", "Soft Blue", "Dark Violet", "Green Mist" }) .OnValueChanged(@<text> function(e) { $("#pie").dxPieChart({ palette: e.value }); } </text>) ) </div> <div class="option"> <span>Palette Extension Mode</span> @(Html.DevExtreme() .SelectBox() .Value("Blend") .Items(Enum.GetNames(typeof(VizPaletteExtensionMode))) .OnValueChanged(@<text> function(e) { $("#pie").dxPieChart({ paletteExtensionMode: e.value.toLowerCase() }); } </text>) ) </div> </div>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult Palette() { return View(); } } }
.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; margin-right: 70px; margin-top: 5px; } .option > span { margin: 0 10px 0 0; } .option > .dx-widget { display: inline-block; vertical-align: middle; }