javascript - Chartist JS color series using for legends - Stack Overflow

admin管理员组

文章数量:1332339

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

Share Improve this question Follow edited May 15, 2017 at 20:03 sshanzel asked May 15, 2017 at 19:57 sshanzelsshanzel 38966 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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;

本文标签： javascriptChartist JS color series using for legendsStack Overflow