Angular Chart - commonSeriesSettings.point.hoverStyle

Configures the appearance adopted by a series point when a user pauses on it.

color

Specifies the color of series points in the hovered state.

This property supports the following colors:

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

This functionality is available for the following Chart series:

app.component.html
app.component.ts
  • <dx-chart ... >
  • <dxi-series ... >
  • <dxo-point ... >
  • <dxo-hover-style
  • [color]="fill"
  • ></dxo-hover-style>
  • </dxo-point>
  • </dxi-series>
  • </dx-chart>
  • // ...
  •  
  • export class AppComponent {
  • // ...
  •  
  • fill = {
  • fillId: this.customPatternId
  • };
  • }