fill

Colors to fill the svg paths. Each index in the array corresponds to the series-index. Example

fill: {
  colors: ['#1A73E8', '#B32824']
}

Alternatively, if you are rendering a bar/pie/donut/radialBar chart, you can pass a function which returns color based on value.

fill: {
  colors: [function({ value, seriesIndex, w }) {
    if(value < 55) {
        return '#7E36AF'
    } else if (value >= 55 && value < 80) {
        return '#164666'
    } else {
        return '#D9534F'
    }
  }]
}

Opacity of the fill attribute.

Whether to fill the paths with solid colors or gradient.
Available options

• solid
• gradient
• pattern
• image

In a multi-series chart, you can pass an array to allow a combination of fill types like this

fill: {
  type: 'gradient' 
}
/* OR */
fill: {
  type: ['solid', 'gradient']
}

Example

Available options for gradient shade

• light
• dark

Available options for gradient type

• horizontal
• vertical
• diagonal1
• diagonal2

Intensity of the gradient shade.
Accepts from 0 to 1

Optional colors that ends the gradient to.
The main colors array becomes the gradientFromColors and this array becomes the end colors of the gradient. Each index in the array corresponds to the series-index.

Inverse the start and end colors of the gradient.

Start color's opacity. If you want different opacity for different series, you can pass an array of numbers. For eg., opacityFrom: [0.2, 0.8]

End color's opacity

Stops defines the ramp of colors to use on a gradient

Override everything and define your own stops with unlimited color stops.

[ 
  [
    {
      offset: 0,
      color: '#eee',
      opacity: 1
    },
    {
      offset: 0.6,
      color: 'green',
      opacity: 50
    },
    {
      offset: 100,
      color: 'red',
      opacity: 1
    }
  ],
  [
    {
      offset: 0,
      color: '#999',
      opacity: 1
    },
    {
      offset: 50,
      color: 'blue',
      opacity: 0.75
    },
    {
      offset: 100,
      color: '#ddd',
      opacity: 1
    }
  ]
]

Each index in the above code corresponds to a series.
Codepen Example

src accepts an array of image paths which will correspond to each series.

Width of each image for all the series

Height of each image for all the series

Available pattern styles

• verticalLines
• horizontalLines
• slantedLines
• squares
• circles

Pattern width which will be repeated at this interval

Pattern height which will be repeated at this interval

Pattern lines width indicates the thickness of the stroke of pattern.