Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

It would be nice to have the option to change transparency for fillColor #258

Open
purpleferret opened this issue Dec 1, 2015 · 6 comments

Comments

@purpleferret
Copy link

To fit the look it would be nice to get the option to change transparency to even switch it off. E.g. the BarChart has transparent fillColor which is hard coded.

@jtblin
Copy link
Owner

jtblin commented Dec 3, 2015

You can change the transparency as much as you want with rgba, nothing is hardcoded on this side. Maybe you meant to open an issue in Chart.js project?

@jtblin jtblin closed this as completed Dec 3, 2015
@purpleferret
Copy link
Author

OK, I see. It is possible to use Chart.js options directly.
Unfortunately with this approach you have to provide a colour set for each data set.
An example for two data sets:

chart.config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all bar charts
    ChartJsProvider.setOptions('Bar', {
      colours: [
        {
          fillColor: "rgba(224, 108, 112, 1)",
          strokeColor: "rgba(207,100,103,1)"
        },
        {
          fillColor: 'rgba(144, 185, 18, 1)',
          strokeColor: 'rgba(47, 132, 71, 1)',
          highlightFill: 'rgba(47, 132, 71, 1)',
          highlightStroke: 'rgba(47, 132, 71, 1)'
        }
      ],
    });
}]);

@jtblin
Copy link
Owner

jtblin commented Dec 5, 2015

I see. Maybe we could add a global option for the fill colour.

@jtblin jtblin reopened this Dec 5, 2015
@samirfor
Copy link

I did something like this for workaround while I wait for a global setting:

function generateColors() {
    var colors = [];
    var arrayColors = [
        "206, 120, 255",
        "71, 160, 220",
        "218, 255, 0",
        "91, 200, 84",
        "255, 194, 193",
        "255, 66, 68",
        "255, 231, 151",
        "255, 167, 40",
        "242, 218, 254",
        "146, 101, 194",
        "220, 220, 170",
        "217, 129, 80"
    ];

    for (var i = 0, countColors = arrayColors.length; i < countColors; i++) {
        var rgb = arrayColors[i];
        colors.push({
            'fillColor': "rgba(0,0,0,0)",
            'strokeColor': "rgba(" + rgb + ",1)",
            'pointColor': "rgba(" + rgb + ",1)",
            'pointHighlightStroke': "rgba(" + rgb + ",0.8)",
            'pointStrokeColor': "#fff",
            'pointHighlightFill': "#fff"
        });
    }
    return colors;
}

@skptr
Copy link

skptr commented Dec 24, 2016

how about line fill color transparancy .........

@SBado
Copy link

SBado commented Oct 27, 2017

It seems to me that you actually force color transparency. Take a look at GetColor (color) function:

backgroundColor: rgba(color, 0.2),

You force alpha to .2. I changed it to:

backgroundColor: rgba(color, alpha),

to get the transparency I wanted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants