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 chart with a gradient fill

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"
  • }]
  • });
  • };
  • }