All docs
V24.2
24.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

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:

index.js
  • const registerGradient = DevExpress.common.charts.registerGradient;
  •  
  • $(() => {
  • $('#chart').dxChart({
  • // ...
  • commonSeriesSettings: {
  • color: {
  • base: "#f5564a",
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • })
  • }
  • }
  • });
  • });