React PieChart - series.hoverStyle
Selector: HoverStyle
Type:
color
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
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.
jQuery
index.js
$(function(){ $("#pieChartContainer").dxPieChart({ // ... series: { // ... hoverStyle: { color: { fillId: customPatternId } } } }); });
Angular
app.component.html
app.component.ts
<dx-pie-chart ... > <dxi-series ... > <dxo-hover-style [color]="fill" ></dxo-hover-style> </dxi-series> </dx-pie-chart>
// ... export class AppComponent { // ... fill = { fillId: this.customPatternId }; }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxPieChart ... > <DxSeries ... > <DxHoverStyle :color="fill" /> </DxSeries> </DxPieChart> </template> <script> import DxPieChart, { DxSeries, DxHoverStyle } from 'devextreme-vue/chart'; // ... export default { components: { DxChart, DxSeries, DxHoverStyle }, data() { return { // ... fill: { fillId: this.customPatternId } } } } </script>
<template> <DxPieChart ... > <DxSeries ... > <DxHoverStyle :color="fill" /> </DxSeries> </DxPieChart> </template> <script setup> import DxPieChart, { DxSeries, DxHoverStyle } from 'devextreme-vue/chart'; // ... const fill = { fillId: customPatternId }; </script>
React
App.js
import React from 'react'; import PieChart, { Series, HoverStyle } from 'devextreme-react/chart'; // ... const fill = { fillId: customPatternId }; export default function App() { return ( <PieChart ... > <Series ... > <HoverStyle color={fill} /> </Series> </PieChart> ); }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.