JavaScript/jQuery RangeSelector - chart.series.hoverStyle
Type:
Declared in commonSeriesSettings, hoverStyle applies to all series in the chart. Declared in a series configuration object, hoverStyle applies to this particular series only. The series-specific hoverStyle overrides the common one.
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.
This functionality is available for the following Chart series:
- Area
- Stacked area
- Full-stacked area
- Spline area
- Stacked spline area
- Full-stacked spline area
- Range area
- Step area
- Bar
- Stacked bar
- Full-stacked bar
- Range bar
- Bubble
jQuery
index.js
$(function(){
$("#chartContainer").dxChart({
// ...
series: {
// ...
hoverStyle: {
color: {
fillId: customPatternId
}
}
}
});
});Angular
app.component.html
app.component.ts
<dx-chart ... >
<dxi-series ... >
<dxo-hover-style
[color]="fill"
></dxo-hover-style>
</dxi-series>
</dx-chart>
// ...
export class AppComponent {
// ...
fill = {
fillId: this.customPatternId
};
} Vue
App.vue (Options API)
App.vue (Composition API)
<template>
<DxChart ... >
<DxSeries ... >
<DxHoverStyle :color="fill" />
</DxSeries>
</DxChart>
</template>
<script>
import DxChart, { DxSeries, DxHoverStyle } from 'devextreme-vue/chart';
// ...
export default {
components: {
DxChart,
DxSeries,
DxHoverStyle
},
data() {
return {
// ...
fill: {
fillId: this.customPatternId
}
}
}
}
</script>
<template>
<DxChart ... >
<DxSeries ... >
<DxHoverStyle :color="fill" />
</DxSeries>
</DxChart>
</template>
<script setup>
import DxChart, { DxSeries, DxHoverStyle } from 'devextreme-vue/chart';
// ...
const fill = {
fillId: customPatternId
};
</script>React
App.js
import React from 'react';
import Chart, { Series, HoverStyle } from 'devextreme-react/chart';
// ...
const fill = {
fillId: customPatternId
};
export default function App() {
return (
<Chart ... >
<Series ... >
<HoverStyle color={fill} />
</Series>
</Chart>
);
} Feedback