0
109
VisualizaçõesCreate Pattern on RGB Colors
I'm currently using Apexcharts to display a data series. In one of the options, I can select an array of colors as defined in the documentation, which is an array of strings. Obviously, passing in hex strings works just fine.
However, what I'm trying to do now is to have my data series on my graph show with patterns. I understand that I can use the fill object as defined here, but that would define a pattern for the whole graph, whereas I would like to define it for certain data only.
Since the color array is an array of strings, is there a way where I can define something like linear-gradient or something equivalent but in string format?
EDIT:
As an example, suppose I have this data series from the Apexchart website. Is there a way that I can set a condition, say if the person is 'Joe' and the type is 'test', then set the gradient to be something (for example gradient: slantedLines)?
The result would therefore be something like:
EDIT2:
I have also seen another question whereby we can specify the property fillColor to specify the color of a given bar in this post. Is there an equivalent to explicitly set the gradient?
1 Respostas
Responde à pergunta0
The question needs some clarification, but this seems to be the most logical answer:
Part 1
In a multi-series chart, you can pass an array to allow a combination of fill types like this:
fill: { // All series use same type: gradient. type: 'gradient' } /* OR */ fill: { // Series alternate between solid type and gradient type. type: ['solid', 'gradient'] }
Part 2
Then, if you want each gradient to use different colors, you pass them as arrays in fill.colors and fill.gradient.gradientToColors (You need two different arrays because gradients transition from a "start" color to a different "end" color.)
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.
The above is an explanation of how to specify:
- A fill type (solid, gradient, pattern, image) for all values in each series. (The two series from the linked example are blue 'Bob' and green 'Joe'.)
- When fill type is gradient: the start/end colors for each value in a series. (The three different values from blue series 'Bob' are '3 days', '3 days', and '5 days'.)
The question is ambiguous and may be asking for something else (which may not even be supported by ApexCharts.) If the above did not answer the question, I suggest adding a sample mock-up image of the desired chart output.
Update: How to change the pattern ('gradient' and 'pattern' are two different types of fills: slantedLines is a pattern, not a gradient.)
The following options causes the 2nd and 3rd values to use patterns (it does not repeat as I assumed).
...
...
fill: {
type: ["solid", "pattern", "pattern"],
pattern: {
style: "slantedLines"
}
}
...
...
