Chartist-js: Change the fill color for line

[ghost]

Hi!

I want to change the redish color for the filled line chart but if I use fill: it only fills from the first point to the last point in the line chart. I want to change the red filled color that shows under the line (positive) and over the line (negative).

What should I do to accomplish this?

[woble]

Can you show a visual example of what you are trying to achieve?

[ghost]

[woble]

Just add showArea: true to the options of your chart.

http://gionkunz.github.io/chartist-js/examples.html#example-line-area

[ghost]

That was not my question. My question was how I can change the color of the area!?

[woble]

Right. Then depending on how many series you have and how many you wish to affect the following should work:

CSS:

.ct-series-a .ct-area {
    fill: cyan;
}

.ct-series-b .ct-area {
    fill: purple;
}

[ghost]

Many thanks :) That did the trick.

[ShahnavazKazi]

Hi woble,

Is it possible to specify a class name through config options to the series I want dynamically to get a particular fill color applied instead of through CSS? More details can be found at https://github.com/gionkunz/chartist-js/issues/635.

Tried as below but it doesn't work:

.series-region {
fill: red;
stroke-width: 1px;
stroke-linecap: square;

    }

series: [
{
name: 'series-1',
className: 'series-region',
data: [
{ x: 0, y: 0 },
{ x: 75, y: 0 },
{ x: 75, y: 23 },
{ x: 100, y: 60 },
{ x: 160, y: 180 }
]
}
.
.
.
.

Thanks,
Shahnavaz

[spyhunter99]

ping, i also want to set the className to use for a series, is this possible?

[spyhunter99]

actually, className worked for me. carry on

[hvallenilla]

Hi woble,

Is it possible to specify a class name through config options to the series I want dynamically to get a particular fill color applied instead of through CSS? More details can be found at #635.

Tried as below but it doesn't work:

.series-region {
fill: red;
stroke-width: 1px;
stroke-linecap: square;

    }

series: [
{
name: 'series-1',
className: 'series-region',
data: [
{ x: 0, y: 0 },
{ x: 75, y: 0 },
{ x: 75, y: 23 },
{ x: 100, y: 60 },
{ x: 160, y: 180 }
]
}
.
.
.
.

Thanks,
Shahnavaz

Thanks so much, this help me !!!