I am currently using a chartist-legend-plugin it was great but when it es to the colors of the legends it ain't working. Does anyone know how to grab the series of colors in chartist? Because chartist automatically generates distinct colors but of course the plugin doesn't have it

JS:

    new Chartist.Bar('.ct-chart-bar', {
    labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
    series: [
        { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
        { "name": "Money B", "data": [40000, 30000, 70000, 65000] },
        { "name": "Money C", "data": [8000, 3000, 10000, 6000] }
    ],
},  {
    fullWidth: true,
    chartPadding: {
        top: 40
    },
    high : 100000,
    plugins: [
        Chartist.plugins.legend(),
    ]
});

CSS:

.ct-legend {
    position: relative;
    z-index: 10;

    li {
        position: relative;
        padding-left: 23px;
        margin-bottom: 3px;
    }

    li:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 0;
        content: '';
        border: 3px solid transparent;
        border-radius: 2px;
    }

    li.inactive:before {
        background: transparent;
    }

    &.ct-legend-inside {
        position: absolute;
        top: 0;
        right: 0;
    }

    @for $i from 0 to length($ct-series-colors) {
        .ct-series-#{$i}:before {
            background-color: nth($ct-series-colors, $i + 1);
            border-color: nth($ct-series-colors, $i + 1);
        }
    }

HTML holder of data:

<div class="ct-chart ct-chart-bar ct-perfect-fourth"></div>

All of its resources came from the link i included. I am a novice on chartist that's why i can't just in to modify the things they are using. Thanks alot everyone!

EDIT:

I think the css is trying to grab the series of colors but it can't unfortunately.

I am currently using a chartist-legend-plugin it was great but when it es to the colors of the legends it ain't working. Does anyone know how to grab the series of colors in chartist? Because chartist automatically generates distinct colors but of course the plugin doesn't have it

JS:

    new Chartist.Bar('.ct-chart-bar', {
    labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
    series: [
        { "name": "Money A", "data": [60000, 40000, 80000, 70000] },
        { "name": "Money B", "data": [40000, 30000, 70000, 65000] },
        { "name": "Money C", "data": [8000, 3000, 10000, 6000] }
    ],
},  {
    fullWidth: true,
    chartPadding: {
        top: 40
    },
    high : 100000,
    plugins: [
        Chartist.plugins.legend(),
    ]
});

CSS:

.ct-legend {
    position: relative;
    z-index: 10;

    li {
        position: relative;
        padding-left: 23px;
        margin-bottom: 3px;
    }

    li:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 0;
        content: '';
        border: 3px solid transparent;
        border-radius: 2px;
    }

    li.inactive:before {
        background: transparent;
    }

    &.ct-legend-inside {
        position: absolute;
        top: 0;
        right: 0;
    }

    @for $i from 0 to length($ct-series-colors) {
        .ct-series-#{$i}:before {
            background-color: nth($ct-series-colors, $i + 1);
            border-color: nth($ct-series-colors, $i + 1);
        }
    }

HTML holder of data:

<div class="ct-chart ct-chart-bar ct-perfect-fourth"></div>

All of its resources came from the link i included. I am a novice on chartist that's why i can't just in to modify the things they are using. Thanks alot everyone!

EDIT:

I think the css is trying to grab the series of colors but it can't unfortunately.

• javascript
• jquery
• css
• chartist.js

1 Answer 1

I think that you already solved the issue, but for others who can be looking for the solution. The CSS is basically not CSS but SCSS/SASS. Styles includes loop which uses variable $ct-series-colors. The variable have to imported from _chartist-settings.scss file via @import "chartist-settings"; or if you are using the default set of colors you can just copy and paste following list. Only for SCSS/SASS not pure CSS!

$ct-series-colors: (
        #d70206,
        #f05b4f,
        #f4c63d,
        #d17905,
        #453d3f,
        #59922b,
        #0544d3,
        #6b0392,
        #f05b4f,
        #dda458,
        #eacf7d,
        #86797d,
        #b2c326,
        #6188e2,
        #a748ca
) !default;