I've currently got a working multi-series that's similar to this Apexcharts example. Within this series, I am using the colors function to specify certain colors depending on certain conditions. For example, as shown in this example, I can do:
colors: [
({ seriesIndex }) => {
// if one condition, return a color
// else if another condition, return a different color
}
]
What I'm trying to do now is something similar to create different patterns within the data series, similar to how it's possible to do so with colors. I have tried to look at the fill object as specified here, but obviously, this will create a standard pattern across all data on the graph. I'd like to specify conditions to return different patterns for specific data (like the colors function).
Is this possible with Apexcharts? I.e., is there a function that allows me to create conditions based on the seriesIndex to create different patterns? Ultimately, I'd like to create some sort of visual difference for certain data (not in terms of color, but moreso patterns/gradients) so that certain data is easily distinguishable from others. What is the best approach for this?
I have tried to use linear-gradient in colors but I'm not sure if that is possible. Alternatively, could I create a custom css within the graph options to fulfil this requirement?
There is a possibility built in with the fill property that allows you to have different patterns for different series:
fill: {
type: 'pattern',
opacity: 1,
pattern: {
style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
}
},
Source: https://apexcharts.com/vue-chart-demos/bar-charts/patterned/
Working example: https://codesandbox.io/s/happy-stallman-ysyec?file=/src/App.js (In the example I used multiple fill types for different series - something, that is possible, too)