JavaScript/jQuery Chart - Customize Appearance
To change series color, use one of the following options:
- Specify a color palette for the component.
- Specify a color for a series.
- Specify a color for all series.
Besides color change, you can add a custom pattern or gradient fill to the following 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
Use the registerPattern() or registerGradient() method to create a custom pattern or gradient.
The following example adds a gradient to all series in a Chart:
app.component.html
app.component.ts
- <dx-chart ... >
- <dxo-common-series-settings [color]="seriesColor">
- </dxo-common-series-settings>
- </dx-chart>
- import { registerGradient } from "devextreme/common/charts";
- export class AppComponent {
- seriesColor = {
- base: "#f5564a",
- fillId: registerGradient("linear", {
- colors: [{
- offset: "20%",
- color: "#97c95c"
- }, {
- offset: "90%",
- color: "#eb3573"
- }]
- });
- };
- }
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.