JavaScript/jQuery PieChart - series.hoverStyle
Type:
color
Default Value: undefined
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>
);
} Feedback