$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "twoColorNeedle",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});

<div id="circularGaugeContainer"></div>

<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="twoColorNeedle"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>

import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})

@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TwoColorNeedle)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

When adapting, the indicator adjusts its parts and surroundings proportionally to the changing widget size. The adjustments affect the incidator's indent from the center, the offset from the scale, and the spindle's size and gap.

CircularGauge Demo View Demo

This option accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors

Use the VizPalette enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

When you use a twoColorNeedle indicator, define the colors for it using the color and secondColor options. The color option sets the color for the base of the needle. The secondColor option sets the color for the tip of the needle.

In addition, you can specify the ratio between the main and the second color using the secondFraction option.

Set this property to 0 so that the spindle has the shape of a circle.