DevExtreme Charts and Gauges (v23.1) — New Features (Angular, React, Vue, jQuery)

DevExtreme Team Blog
31 October 2023

In this post, I'll summarize important Chart and Gauge-related features introduced in our last major release cycle (v23.1).

Charts — Сolor Gradients and Patterns

With v23.1, you now have the ability to customize styles and apply gradients, patterns, and images to your Charts.

PieChart with colored series

To declare linear and radial gradient styles, utilize the registerGradient() method. This method returns a unique ID that can be used in the series/point/pane color object.

Chart with gradient-colored pane

In this example, the Chart pane is colored using a linear gradient.


import { registerGradient } from "devextreme/common/charts"; 
const gradientId = registerGradient("linear", {
    colors: [{
        offset: "0%",
        color: "#1D5B79"
    }, {
        offset: "25%",
        color: "#EF6262"
    }, {
        offset: "55%",
        color: "#F3AA60"
    }, {
        offset: "80%",
        color: "#468B97"

export class AppComponent {
    paneColor = {
        fillId: gradientId


<dx-chart ... > 
    <dxo-common-pane-settings [color]="paneColor"> 

For pattern and image styles, use the registerPattern() method.

Chart with pattern-colored series


import { registerPattern } from "devextreme/common/charts"; 
const patternId = registerPattern({ 
    width: 10, 
    height: 10, 
    template: (container) => { 
        const rect = document.createElementNS('', 'rect'); 
        rect.setAttribute('x', 0); 
        rect.setAttribute('y', 0); 
        rect.setAttribute('width', 9); 
        rect.setAttribute('height', 9); 
        rect.setAttribute('fill', '#461959'); 
export class AppComponent { 
    seriesColor = { 
        fillId: patternId


<dx-chart ... > 
    <dxi-series [color]="seriesColor"> 

View Demo


BarGauge — New 'Shift' Mode to Resolve Overlapping Labels

To prevent overlapping labels in a BarGauge when multiple values are displayed closely together, you can utilize the resolveLabelOverlapping property of the Gauge component. This property allows you to specify how the component modifies the position/visibility of labels. With the introduction of our new shift mode, BarGauge labels can dynamically shift their positions as needed to avoid overlap.

BarGauge with resolved label overlapping

<dx-bar-gauge ... 


Gauge – Custom Content Inside the Component

You can now add custom SVG content (such as text and images) inside the Gauge component.

Gauge with an image in center

To add custom SVG content, use our new centerTemplate property.

<dx-circular-gauge centerTemplate="centerTemplate" ... > 
    <svg *dxTemplate="let gauge of 'centerTemplate'"> 

        <image href="url/image.png" x="0" y="0" width="100" height="100"></image> 


View Demo


Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.