# Syling Series in FlexChart

Learn how to style the series of Wijmo's chart components in this documentation topic

## Content

The FlexChart automatically picks colors for each series based on a default palette, which you can override by setting the __palette__ property. But you can also override the default settings by setting the __style__ property of any series to an object that specifies SVG styling attributes, including __fill__, __stroke__, __strokeThickness__, and so on.

The __Series.style__ property is an exception to the general rule that all styling in Wijmo is done through CSS. The exception reflects the fact that many charts have dynamic series, which would be impossible to style in advance. For example, a stock chart may show series selected by the user while running the application.

The chart in this example uses the __style__ and __symbolStyle__ properties to select style attributes for each series:

```JavaScript
import * as chart from '@mescius/wijmo.chart';

var myChart = new chart.FlexChart('#myChart', {
    itemsSource: appData,
    bindingX: 'country',
    series: [
        {
            name: 'Sales',
            binding: 'sales',
            style: {
                fill: 'green',
                stroke: 'darkgreen',
                strokeWidth: 1
            }
        },
        {
            name: 'Expenses',
            binding: 'expenses',
            style: {
                fill: 'red',
                stroke: 'darkred',
                strokeWidth: 1
            }
        },
        {
            name: 'Downloads',
            binding: 'downloads',
            chartType: 'LineSymbols',
            style: {
                stroke: 'orange',
                strokeWidth: 5
            },
            symbolStyle: {
                fill: 'gold',
                stroke: 'gold'
            }
        }
    ]
});
```
![Styled Series](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-styling-series.png)
## Alternate Style
he __altStyle__ (alternative style) is used for negative values in Bar, Column, and Scatter charts; and for rising values in financial chart types like Candlestick, LineBreak, EquiVolume etc. By default, the __altStyle__ is null and uses the default style.

Example:

```JavaScript
myChart.series[0].style = {
    fill:'green', 
    stroke:'darkgreen',
    strokeWidth: 1};

myChart.series[0].altStyle = {
    fill:'red', 
    stroke:'darkred',
    strokeWidth: 1};
```

## Using Gradient Colors
The FlexChart supports gradient colors. The gradient descriptor is an expression formatted as follows: 
```
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]].
```
The __type__ can be either linear or radial. The uppercase L or R letters indicate absolute coordinates offset from the SVG surface. Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied. 
Coordinates is a set of three or four numbers that specify a linear gradient vector as x1, y1, x2, y2, or a radial gradient as cx, cy, r and optional fx, fy, fr specifying a focal point away from the center of the circle. Specify __colors__ as a list of dash-separated CSS color values. Each color may be followed by a custom offset and opacity value, separated with a colon character.

Linear gradient format example:

'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'

Radial gradient format example:

'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'

JavaScript examples setting the style to a gradient:

```JavaScript
// light blue gradient
myChart.series[0].style = {
	fill: 'l(0,0,1,0)#89f7fe-#66a6ff'
};
myChart.refresh(true);
```
![Gradient Colors](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-gradient-colors1.png)
```JavaScript
// orange gradient
myChart.series[0].style = {
	fill: 'l(0,0,0,1)#e27f00-#ae1a73'
};
myChart.refresh(true);
```
![Gradient Colors](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/chart/chart-gradient-colors2.png)