Give each line individually a color, background and stroke type

[angelo-at-webleaders]

I am trying to set a fixed color for each line but as soon as I add the color, the line will automatically also get a fill which I do not want.

I have tried anything I can find on Google but unfortunately without any working solution. Can anyone please help me out?

For each data object I create an object like this:

const obj = {
  name: index,
  data: [],
  color: dataTypeColors[i],
}

In my chart options I use the fill option to make the fill transparent like this:

fill: {
  type: 'solid',
colors: ['transparent'],
}

If I do not fill in a color in the data object, it works perfectly. The downside is that Apex decides what line gets what color, and that is not what I want. I want to define the color for each line myself.

As soon as I add the color for the lines, Apex will ignore the "transparent" fill and fill in the background with the color given in the data object.

Does anyone know how I can decide what color each line gets, but without a fill? I also would like to give some, not all, lines a dash instead of a solid line.

Below is an example of the outcome with the above code. I expect a line without a (gradient) fill, but all lines do have fills.

I tried everything I can find on Google but nothing worked unfortunately. I am using Nuxt 2 and the latest version of Apex charts.

So in short what I want:

1. Give each line individually a custom color
2. Decide for each line individually if the line is solid or dashed
3. Decide for each line individually if the line has a colored or transparent background (gradient)

[LentoMan]

Most options can be configured using an array to specify a setting for each data set, you should be able to set the line color using an array with the global colors property at the top level. Another option for transparent colors is to set the level of transparency using the opacity option for for each data set, try something like this and adjust to your requirements:

var options = {
      colors: ["#000000", "#00FF00"],
      fill: {
        type: "solid",
        colors: ["#FF0000","#0000FF"],
        opacity: [0.5,1.0]
      }
}

[angelo-at-webleaders]

Most options can be configured using an array to specify a setting for each data set, you should be able to set the line color using an array with the global colors property at the top level. Another option for transparent colors is to set the level of transparency using the opacity option for for each data set, try something like this and adjust to your requirements:

var options = {
      colors: ["#000000", "#00FF00"],
      fill: {
        type: "solid",
        colors: ["#FF0000","#0000FF"],
        opacity: [0.5,1.0]
      }
}

Hi LentoMan, that is true BUT in this case it does not work for me. Let me explain.

I have 4 filters, each filter represents a dataset. If I click on filter "A" and then on "B" , "A" will be shown in color 1 and "B" will be shown in color 2.

If I click on filter 2 first and then on filter 1, the colors are swapped. Therefor I need to set the color in the dataset itself.

This does work and each "dataset" has its own colors now, but the downside is that I cannot control the gradient anymore for each individual database.

[LentoMan]

I am not sure I fully understand, but it sounds like you may have to do some custom javascript code and update your options/config dynamically depending on selected filters and then force a redraw. It might be possible to write a custom legendClick event handler if that is what you use for filtering...