Gradient in Vue Chart control

18 Nov 201824 minutes to read

Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:

  • Linear gradient
  • Radial gradient

Gradients can be applied to:

  • Series
  • Trendlines
  • Technical Indicators

Linear gradient

A linear gradient blends color along side a straight path from a defined start point to an end point. Configure it by adding linearGradient inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using x1, y1, x2 and y2 properties. The gradient color stop values such as offset, color, opacity, lighten and brighten are set using the gradientColorStop property.

In the linearGradient:

  • x1 - Sets the horizontal start position of the gradient (0 to 1).
  • y1 - Sets the vertical start position of the gradient (0 to 1).
  • x2 - Sets the horizontal end position of the gradient (0 to 1).
  • y2 - Sets the vertical end position of the gradient (0 to 1).

In the gradientColorStop:

  • offset - Specifies the position of the color stop along the gradient (0 to 100).
  • color - Sets the color at the stop.
  • opacity - Defines the transparency of the stop (0 to 1).
  • lighten - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
  • brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.

Series

Apply a linear gradient to a series by adding linearGradient inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="SalesData" type="Column" xName="Month" yName="Amount" name="Sales"
          :linearGradient="linearGradient" :marker="marker">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker } from "@syncfusion/ej2-vue-charts";

const SalesData = [
  { Month: 'Jan', Amount: 78 },
  { Month: 'Feb', Amount: 88 },
  { Month: 'Mar', Amount: 99 },
  { Month: 'Apr', Amount: 92 },
  { Month: 'May', Amount: 95 },
  { Month: 'Jun', Amount: 102 },
  { Month: 'Jul', Amount: 110 },
  { Month: 'Aug', Amount: 105 }
];

const primaryXAxis = {
  valueType: 'Category'
};

const primaryYAxis = {
  labelFormat: '${value}k'
};

const linearGradient = {
  x1: 0, y1: 0,
  x2: 0, y2: 1,
  gradientColorStop: [
    { color: '#4F46E5', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
    { color: '#22D3EE', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
  ]
};

const marker = { visible: true, isFilled: true, dataLabel: { visible: true } };

const tooltip = { enable: true };

const legendSettings = { visible: true };

const title = 'Monthly Sales Performance';

provide('chart', [ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="SalesData" type="Column" xName="Month" yName="Amount" name="Sales"
          :linearGradient="linearGradient" :marker="marker">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      SalesData: [
        { Month: 'Jan', Amount: 78 },
        { Month: 'Feb', Amount: 88 },
        { Month: 'Mar', Amount: 99 },
        { Month: 'Apr', Amount: 92 },
        { Month: 'May', Amount: 95 },
        { Month: 'Jun', Amount: 102 },
        { Month: 'Jul', Amount: 110 },
        { Month: 'Aug', Amount: 105 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        labelFormat: '${value}k'
      },
      linearGradient: {
        x1: 0, y1: 0,
        x2: 0, y2: 1,
        gradientColorStop: [
          { color: '#4F46E5', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
          { color: '#22D3EE', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
        ]
      },
      marker: { visible: true, isFilled: true, dataLabel: { visible: true } },
      tooltip: { enable: true },
      legendSettings: { visible: true },
      title: 'Monthly Sales Performance'
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Trendlines

Apply a linear gradient to a trendline by adding linearGradient inside the target Trendline.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="OrdersData" type="Spline" xName="Month" yName="Orders" name="Orders"
          :marker="marker" :trendlines="trendlines">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, SplineSeries, Category, Legend, Marker, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";

const OrdersData = [
  { Month: "Jan", Orders: 24 },
  { Month: "Feb", Orders: 30 },
  { Month: "Mar", Orders: 27 },
  { Month: "Apr", Orders: 34 },
  { Month: "May", Orders: 41 },
  { Month: "Jun", Orders: 37 },
  { Month: "Jul", Orders: 49 },
  { Month: "Aug", Orders: 45 },
  { Month: "Sep", Orders: 39 },
  { Month: "Oct", Orders: 46 },
  { Month: "Nov", Orders: 54 },
  { Month: "Dec", Orders: 52 }
];

const primaryXAxis = {
  valueType: 'Category',
  majorGridLines: {
    width: 0
  }
};

const primaryYAxis = {
  lineStyle: {
    width: 0
  },
  majorTickLines: {
    width: 0
  }
};

const marker = {
  visible: true
};

const trendlines = [
  {
    type: 'Linear',
    width: 3,
    name: 'Trend',
    linearGradient: {
      x1: 0, y1: 0,
      x2: 1, y2: 0,
      gradientColorStop: [
        { color: '#F97316', offset: 0, opacity: 1 },
        { color: '#4F46E5', offset: 100, opacity: 1 }
      ]
    }
  }
];

const legendSettings = {
  visible: true
};

const title = 'Retail Orders Processed';

provide('chart', [SplineSeries, Category, Legend, Marker, Trendlines, LineSeries]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="OrdersData" type="Spline" xName="Month" yName="Orders" name="Orders"
          :marker="marker" :trendlines="trendlines">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, SplineSeries, Category, Legend, Marker, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      OrdersData: [
        { Month: "Jan", Orders: 24 },
        { Month: "Feb", Orders: 30 },
        { Month: "Mar", Orders: 27 },
        { Month: "Apr", Orders: 34 },
        { Month: "May", Orders: 41 },
        { Month: "Jun", Orders: 37 },
        { Month: "Jul", Orders: 49 },
        { Month: "Aug", Orders: 45 },
        { Month: "Sep", Orders: 39 },
        { Month: "Oct", Orders: 46 },
        { Month: "Nov", Orders: 54 },
        { Month: "Dec", Orders: 52 }
      ],
      primaryXAxis: {
        valueType: 'Category',
        majorGridLines: {
          width: 0
        }
      },
      primaryYAxis: {
        lineStyle: {
          width: 0
        },
        majorTickLines: {
          width: 0
        }
      },
      marker: {
        visible: true
      },
      trendlines: [
        {
          type: 'Linear',
          width: 3,
          name: 'Trend',
          linearGradient: {
            x1: 0, y1: 0,
            x2: 1, y2: 0,
            gradientColorStop: [
              { color: '#F97316', offset: 0, opacity: 1 },
              { color: '#4F46E5', offset: 100, opacity: 1 }
            ]
          }
        }
      ],
      legendSettings: {
        visible: true
      },
      title: 'Retail Orders Processed'
    };
  },
  provide: {
    chart: [SplineSeries, Category, Legend, Marker, Trendlines, LineSeries]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Technical Indicators

Apply a linear gradient to a technical indicator by adding linearGradient inside the target Indicator.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings" :indicators="indicators">
      <e-series-collection>
        <e-series :dataSource="PriceSeries" type="Candle" xName="Date" yName="Close" low="Low" high="High" 
          close="Close" open="Open" volume="Volume" name="Equity Price" :width="2">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, DateTime, Legend, Tooltip, Ema } from "@syncfusion/ej2-vue-charts";

const PriceSeries = [
  { Date: new Date(2025, 0, 1), Open: 103.9, High: 106.8, Low: 102.5, Close: 105.6, Volume: 182540000 },
  { Date: new Date(2025, 1, 1), Open: 105.2, High: 108.1, Low: 103.4, Close: 106.9, Volume: 176310000 },
  { Date: new Date(2025, 2, 1), Open: 106.7, High: 110.6, Low: 105.1, Close: 108.7, Volume: 189250000 },
  { Date: new Date(2025, 3, 1), Open: 108.9, High: 110.9, Low: 106.8, Close: 107.6, Volume: 171900000 },
  { Date: new Date(2025, 4, 1), Open: 107.8, High: 112.3, Low: 106.9, Close: 111.4, Volume: 196700000 },
  { Date: new Date(2025, 5, 1), Open: 111.2, High: 114.9, Low: 110.0, Close: 113.6, Volume: 205600000 },
  { Date: new Date(2025, 6, 1), Open: 113.5, High: 117.3, Low: 112.2, Close: 116.0, Volume: 213400000 },
  { Date: new Date(2025, 7, 1), Open: 116.1, High: 119.2, Low: 114.6, Close: 118.1, Volume: 221900000 },
  { Date: new Date(2025, 8, 1), Open: 117.9, High: 120.7, Low: 116.0, Close: 116.8, Volume: 198300000 },
  { Date: new Date(2025, 9, 1), Open: 116.7, High: 121.6, Low: 116.1, Close: 119.9, Volume: 234600000 },
  { Date: new Date(2025, 10, 1), Open: 120.2, High: 123.9, Low: 118.8, Close: 122.5, Volume: 226100000 }
];

const primaryXAxis = {
  title: 'Months',
  valueType: 'DateTime',
  intervalType: 'Months',
  labelFormat: 'MMM yyyy',
  edgeLabelPlacement: 'Shift',
  majorGridLines: {
    width: 0
  }
};

const primaryYAxis = {
  title: 'Price (USD)',
  labelFormat: '${value}',
  minimum: 90,
  maximum: 130,
  interval: 10,
  lineStyle: {
    width: 0
  },
  majorTickLines: {
    width: 0
  }
};

const indicators = [
  {
    type: 'Ema',
    field: 'Close',
    seriesName: 'Equity Price',
    xName: 'Date',
    width: 2,
    period: 3,
    linearGradient: {
      x1: 0, y1: 0,
      x2: 1, y2: 0,
      gradientColorStop: [
        { color: '#7C3AED', offset: 0, opacity: 1 },
        { color: '#F59E0B', offset: 100, opacity: 1 }
      ]
    }
  }
];

const tooltip = {
  enable: true
};

const legendSettings = {
  visible: false
};

const title = 'Equity Price - Jan-Nov 2025';

provide('chart', [CandleSeries, DateTime, Legend, Tooltip, Ema]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings" :indicators="indicators">
      <e-series-collection>
        <e-series :dataSource="PriceSeries" type="Candle" xName="Date" yName="Close" low="Low" high="High" 
          close="Close" open="Open" volume="Volume" name="Equity Price" :width="2">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import {ChartComponent, SeriesCollectionDirective, SeriesDirective, Chart, CandleSeries, Category, LineSeries, Tooltip, Crosshair, Legend, DateTime, EmaIndicator } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      PriceSeries: [
        { Date: new Date(2025, 0, 1), Open: 103.9, High: 106.8, Low: 102.5, Close: 105.6, Volume: 182540000 },
        { Date: new Date(2025, 1, 1), Open: 105.2, High: 108.1, Low: 103.4, Close: 106.9, Volume: 176310000 },
        { Date: new Date(2025, 2, 1), Open: 106.7, High: 110.6, Low: 105.1, Close: 108.7, Volume: 189250000 },
        { Date: new Date(2025, 3, 1), Open: 108.9, High: 110.9, Low: 106.8, Close: 107.6, Volume: 171900000 },
        { Date: new Date(2025, 4, 1), Open: 107.8, High: 112.3, Low: 106.9, Close: 111.4, Volume: 196700000 },
        { Date: new Date(2025, 5, 1), Open: 111.2, High: 114.9, Low: 110.0, Close: 113.6, Volume: 205600000 },
        { Date: new Date(2025, 6, 1), Open: 113.5, High: 117.3, Low: 112.2, Close: 116.0, Volume: 213400000 },
        { Date: new Date(2025, 7, 1), Open: 116.1, High: 119.2, Low: 114.6, Close: 118.1, Volume: 221900000 },
        { Date: new Date(2025, 8, 1), Open: 117.9, High: 120.7, Low: 116.0, Close: 116.8, Volume: 198300000 },
        { Date: new Date(2025, 9, 1), Open: 116.7, High: 121.6, Low: 116.1, Close: 119.9, Volume: 234600000 },
        { Date: new Date(2025, 10, 1), Open: 120.2, High: 123.9, Low: 118.8, Close: 122.5, Volume: 226100000 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'DateTime',
        intervalType: 'Months',
        labelFormat: 'MMM yyyy',
        edgeLabelPlacement: 'Shift',
        majorGridLines: {
          width: 0
        }
      },
      primaryYAxis: {
        title: 'Price (USD)',
        labelFormat: '${value}',
        minimum: 90,
        maximum: 130,
        interval: 10,
        lineStyle: {
          width: 0
        },
        majorTickLines: {
          width: 0
        }
      },
      indicators: [
        {
          type: 'Ema',
          field: 'Close',
          seriesName: 'Equity Price',
          xName: 'Date',
          width: 2,
          period: 3,
          linearGradient: {
            x1: 0, y1: 0,
            x2: 1, y2: 0,
            gradientColorStop: [
              { color: '#7C3AED', offset: 0, opacity: 1 },
              { color: '#F59E0B', offset: 100, opacity: 1 }
            ]
          }
        }
      ],
      tooltip: {
        enable: true
      },
      legendSettings: {
        visible: false
      },
      title: 'Equity Price - Jan-Nov 2025'
    };
  },
  provide: {
    chart: [CandleSeries, LineSeries, Category, Tooltip, Crosshair, EmaIndicator, Legend, DateTime]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Radial gradient

A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding radialGradient inside the target element (Series, Trendline, or Indicator) and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using radialGradient properties. The color stop values such as offset, color, opacity, lighten, and brighten are set using the gradientColorStop property.

In the radialGradient:

  • cx - Sets the normalized horizontal center of the gradient (0 to 1).
  • cy - Sets the normalized vertical center of the gradient (0 to 1).
  • fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
  • fy - Sets the normalized vertical focal point (0 to 1).
  • r - Sets the normalized radius of the gradient circle (0 to 1).

In the gradientColorStop:

  • offset - Specifies the position of the color stop along the gradient (0 to 100).
  • color - Sets the color at the stop.
  • opacity - Defines the transparency of the stop (0 to 1).
  • lighten - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
  • brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.

Series

Apply a radial gradient to a series by adding radialGradient inside the target Series. The same gradient is applied to the series markers, legend symbol and tooltip marker for visual consistency.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="SalesData" type="Column" xName="Month" yName="Amount" name="Sales"
          :radialGradient="radialGradient" :marker="marker">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker } from "@syncfusion/ej2-vue-charts";

const SalesData = [
  { Month: 'Jan', Amount: 78 },
  { Month: 'Feb', Amount: 88 },
  { Month: 'Mar', Amount: 99 },
  { Month: 'Apr', Amount: 92 },
  { Month: 'May', Amount: 95 },
  { Month: 'Jun', Amount: 102 },
  { Month: 'Jul', Amount: 110 },
  { Month: 'Aug', Amount: 105 }
];

const primaryXAxis = {
  valueType: 'Category'
};

const primaryYAxis = {
  labelFormat: '${value}k'
};

const radialGradient = {
  cx: 0.5, cy: 0.5,
  fx: 0.5, fy: 0.5, r: 0.5,
  gradientColorStop: [
    { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
    { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
  ]
};

const marker = { visible: true, isFilled: true, dataLabel: { visible: true } };

const tooltip = { enable: true };

const legendSettings = { visible: true };

const title = 'Monthly Sales Performance';

provide('chart', [ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="SalesData" type="Column" xName="Month" yName="Amount" name="Sales"
          :radialGradient="radialGradient" :marker="marker">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      SalesData: [
        { Month: 'Jan', Amount: 78 },
        { Month: 'Feb', Amount: 88 },
        { Month: 'Mar', Amount: 99 },
        { Month: 'Apr', Amount: 92 },
        { Month: 'May', Amount: 95 },
        { Month: 'Jun', Amount: 102 },
        { Month: 'Jul', Amount: 110 },
        { Month: 'Aug', Amount: 105 }
      ],
      primaryXAxis: {
        valueType: 'Category'
      },
      primaryYAxis: {
        labelFormat: '${value}k'
      },
      radialGradient: {
        cx: 0.5, cy: 0.5,
        fx: 0.5, fy: 0.5, r: 0.5,
        gradientColorStop: [
          { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
          { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
        ]
      },
      marker: { visible: true, isFilled: true, dataLabel: { visible: true } },
      tooltip: { enable: true },
      legendSettings: { visible: true },
      title: 'Monthly Sales Performance'
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Legend, Tooltip, DataLabel, Marker]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Trendlines

Apply a linear gradient to a trendline by adding linearGradient inside the target Trendline.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="OrdersData" type="Spline" xName="Month" yName="Orders" name="Orders"
          :marker="marker" :trendlines="trendlines">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, SplineSeries, Category, Legend, Marker, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";

const OrdersData = [
  { Month: "Jan", Orders: 24 },
  { Month: "Feb", Orders: 30 },
  { Month: "Mar", Orders: 27 },
  { Month: "Apr", Orders: 34 },
  { Month: "May", Orders: 41 },
  { Month: "Jun", Orders: 37 },
  { Month: "Jul", Orders: 49 },
  { Month: "Aug", Orders: 45 },
  { Month: "Sep", Orders: 39 },
  { Month: "Oct", Orders: 46 },
  { Month: "Nov", Orders: 54 },
  { Month: "Dec", Orders: 52 }
];

const primaryXAxis = {
  valueType: 'Category',
  majorGridLines: {
    width: 0
  }
};

const primaryYAxis = {
  lineStyle: {
    width: 0
  },
  majorTickLines: {
    width: 0
  }
};

const marker = {
  visible: true
};

const trendlines = [
  {
    type: 'Linear',
    width: 3,
    name: 'Trend',
    radialGradient : {
    cx: 0.5, cy: 0.5,
    fx: 0.5, fy: 0.5, r: 0.5,
    gradientColorStop: [
    { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
    { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
     ]
   }
  }
];

const legendSettings = {
  visible: true
};

const title = 'Retail Orders Processed';

provide('chart', [SplineSeries, Category, Legend, Marker, Trendlines, LineSeries]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :legendSettings="legendSettings">
      <e-series-collection>
        <e-series :dataSource="OrdersData" type="Spline" xName="Month" yName="Orders" name="Orders"
          :marker="marker" :trendlines="trendlines">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, SplineSeries, Category, Legend, Marker, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      OrdersData: [
        { Month: "Jan", Orders: 24 },
        { Month: "Feb", Orders: 30 },
        { Month: "Mar", Orders: 27 },
        { Month: "Apr", Orders: 34 },
        { Month: "May", Orders: 41 },
        { Month: "Jun", Orders: 37 },
        { Month: "Jul", Orders: 49 },
        { Month: "Aug", Orders: 45 },
        { Month: "Sep", Orders: 39 },
        { Month: "Oct", Orders: 46 },
        { Month: "Nov", Orders: 54 },
        { Month: "Dec", Orders: 52 }
      ],
      primaryXAxis: {
        valueType: 'Category',
        majorGridLines: {
          width: 0
        }
      },
      primaryYAxis: {
        lineStyle: {
          width: 0
        },
        majorTickLines: {
          width: 0
        }
      },
      marker: {
        visible: true
      },
      trendlines: [
        {
          type: 'Linear',
          width: 3,
          name: 'Trend',
          radialGradient : {
              cx: 0.5, cy: 0.5,
              fx: 0.5, fy: 0.5, r: 0.5,
              gradientColorStop: [
              { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
              { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
            ]
          }
        }
      ],
      legendSettings: {
        visible: true
      },
      title: 'Retail Orders Processed'
    };
  },
  provide: {
    chart: [SplineSeries, Category, Legend, Marker, Trendlines, LineSeries]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Technical Indicators

Apply a linear gradient to a technical indicator by adding linearGradient inside the target Indicator.

<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings" :indicators="indicators">
      <e-series-collection>
        <e-series :dataSource="PriceSeries" type="Candle" xName="Date" yName="Close" low="Low" high="High" 
          close="Close" open="Open" volume="Volume" name="Equity Price" :width="2">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, DateTime, Legend, Tooltip, Ema } from "@syncfusion/ej2-vue-charts";

const PriceSeries = [
  { Date: new Date(2025, 0, 1), Open: 103.9, High: 106.8, Low: 102.5, Close: 105.6, Volume: 182540000 },
  { Date: new Date(2025, 1, 1), Open: 105.2, High: 108.1, Low: 103.4, Close: 106.9, Volume: 176310000 },
  { Date: new Date(2025, 2, 1), Open: 106.7, High: 110.6, Low: 105.1, Close: 108.7, Volume: 189250000 },
  { Date: new Date(2025, 3, 1), Open: 108.9, High: 110.9, Low: 106.8, Close: 107.6, Volume: 171900000 },
  { Date: new Date(2025, 4, 1), Open: 107.8, High: 112.3, Low: 106.9, Close: 111.4, Volume: 196700000 },
  { Date: new Date(2025, 5, 1), Open: 111.2, High: 114.9, Low: 110.0, Close: 113.6, Volume: 205600000 },
  { Date: new Date(2025, 6, 1), Open: 113.5, High: 117.3, Low: 112.2, Close: 116.0, Volume: 213400000 },
  { Date: new Date(2025, 7, 1), Open: 116.1, High: 119.2, Low: 114.6, Close: 118.1, Volume: 221900000 },
  { Date: new Date(2025, 8, 1), Open: 117.9, High: 120.7, Low: 116.0, Close: 116.8, Volume: 198300000 },
  { Date: new Date(2025, 9, 1), Open: 116.7, High: 121.6, Low: 116.1, Close: 119.9, Volume: 234600000 },
  { Date: new Date(2025, 10, 1), Open: 120.2, High: 123.9, Low: 118.8, Close: 122.5, Volume: 226100000 }
];

const primaryXAxis = {
  title: 'Months',
  valueType: 'DateTime',
  intervalType: 'Months',
  labelFormat: 'MMM yyyy',
  edgeLabelPlacement: 'Shift',
  majorGridLines: {
    width: 0
  }
};

const primaryYAxis = {
  title: 'Price (USD)',
  labelFormat: '${value}',
  minimum: 90,
  maximum: 130,
  interval: 10,
  lineStyle: {
    width: 0
  },
  majorTickLines: {
    width: 0
  }
};

const indicators = [
  {
    type: 'Ema',
    field: 'Close',
    seriesName: 'Equity Price',
    xName: 'Date',
    width: 2,
    period: 3,
    radialGradient : {
    cx: 0.5, cy: 0.5,
    fx: 0.5, fy: 0.5, r: 0.5,
    gradientColorStop: [
    { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
    { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
     ]
   }
  }
];

const tooltip = {
  enable: true
};

const legendSettings = {
  visible: false
};

const title = 'Equity Price - Jan-Nov 2025';

provide('chart', [CandleSeries, DateTime, Legend, Tooltip, Ema]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title="title" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis"
      :tooltip="tooltip" :legendSettings="legendSettings" :indicators="indicators">
      <e-series-collection>
        <e-series :dataSource="PriceSeries" type="Candle" xName="Date" yName="Close" low="Low" high="High" 
          close="Close" open="Open" volume="Volume" name="Equity Price" :width="2">
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>

<script>
import {ChartComponent, SeriesCollectionDirective, SeriesDirective, Chart, CandleSeries, Category, LineSeries, Tooltip, Crosshair, Legend, DateTime, EmaIndicator } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      PriceSeries: [
        { Date: new Date(2025, 0, 1), Open: 103.9, High: 106.8, Low: 102.5, Close: 105.6, Volume: 182540000 },
        { Date: new Date(2025, 1, 1), Open: 105.2, High: 108.1, Low: 103.4, Close: 106.9, Volume: 176310000 },
        { Date: new Date(2025, 2, 1), Open: 106.7, High: 110.6, Low: 105.1, Close: 108.7, Volume: 189250000 },
        { Date: new Date(2025, 3, 1), Open: 108.9, High: 110.9, Low: 106.8, Close: 107.6, Volume: 171900000 },
        { Date: new Date(2025, 4, 1), Open: 107.8, High: 112.3, Low: 106.9, Close: 111.4, Volume: 196700000 },
        { Date: new Date(2025, 5, 1), Open: 111.2, High: 114.9, Low: 110.0, Close: 113.6, Volume: 205600000 },
        { Date: new Date(2025, 6, 1), Open: 113.5, High: 117.3, Low: 112.2, Close: 116.0, Volume: 213400000 },
        { Date: new Date(2025, 7, 1), Open: 116.1, High: 119.2, Low: 114.6, Close: 118.1, Volume: 221900000 },
        { Date: new Date(2025, 8, 1), Open: 117.9, High: 120.7, Low: 116.0, Close: 116.8, Volume: 198300000 },
        { Date: new Date(2025, 9, 1), Open: 116.7, High: 121.6, Low: 116.1, Close: 119.9, Volume: 234600000 },
        { Date: new Date(2025, 10, 1), Open: 120.2, High: 123.9, Low: 118.8, Close: 122.5, Volume: 226100000 }
      ],
      primaryXAxis: {
        title: 'Months',
        valueType: 'DateTime',
        intervalType: 'Months',
        labelFormat: 'MMM yyyy',
        edgeLabelPlacement: 'Shift',
        majorGridLines: {
          width: 0
        }
      },
      primaryYAxis: {
        title: 'Price (USD)',
        labelFormat: '${value}',
        minimum: 90,
        maximum: 130,
        interval: 10,
        lineStyle: {
          width: 0
        },
        majorTickLines: {
          width: 0
        }
      },
      indicators: [
        {
          type: 'Ema',
          field: 'Close',
          seriesName: 'Equity Price',
          xName: 'Date',
          width: 2,
          period: 3,
          radialGradient : {
            cx: 0.5, cy: 0.5,
            fx: 0.5, fy: 0.5, r: 0.5,
            gradientColorStop: [
              { color: '#FFFF00', offset: 0, opacity: 1, lighten: 0, brighten: 0 },
              { color: '#7C3AED', offset: 100, opacity: 0.95, lighten: 0, brighten: 0.9 }
            ]
         }
        }
      ],
      tooltip: {
        enable: true
      },
      legendSettings: {
        visible: false
      },
      title: 'Equity Price - Jan-Nov 2025'
    };
  },
  provide: {
    chart: [CandleSeries, LineSeries, Category, Tooltip, Crosshair, EmaIndicator, Legend, DateTime]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>