How to have solid colored bars in angular-chart bar chart
Question
I'm using angular-chart (based on chart.js) to create some bar charts and am having trouble getting the bar styling I want. I want the bars to be solid colors like this:
But I can't figure out how to get rid of the alpha that chart.js adds by default:
My html looks like this:
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar"
chart-labels="ctrl.socialChart.labels"
chart-data="ctrl.socialChart.data"
chart-series="ctrl.socialChart.series"
chart-colors="ctrl.socialChart.colors"
chart-options="ctrl.socialChart.options"></canvas>
</body>
And the javascript:
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options: {
legend: {
display: true
}
},
labels: ['2012'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
// colors: ['rgba(237, 64, 42, 1)', 'rgba(240, 171, 5, 1)', 'rgba(160, 180, 33, 1)', 'rgba(0, 163, 159, 1)'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data: [[1178], [652], [1004], [838]]
}
}]);
Here's a Plunker demonstrating it: Plunker
I've found lots of information about using rgba notation (which for some reason gives me the wrong colors altogether) and fillColor (which I can't get working at all). It's hard to tell what info is for version 1 or 2 of chart.js.
Any help would be appreciated.
4 answers
solution1
5 ACCPTED 2016-11-03 17:58:37
You can use chart-dataset-override="datasetOverride"
HTML
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-series="series"
chart-dataset-override="datasetOverride"></canvas>
</div>
Controller
ctrl.datasetOverride = [{
fill: true,
backgroundColor: [
"#ED402A",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#F0AB05",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#A0B421",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#00A39F",
"#36A2EB",
"#FFCE56"
]
},
];
solution2
1 2017-01-17 09:50:10
I am using chart.js version 2 with angular wrapper, Doing the following edits helped me.
Changes - color takes argument in the form of rgba(R,G,B,alpha)
alpha = 1 : solid color, alpha = 0 : Transparent color
In HTML : <canvas id="bar" class="chart chart-bar" chart-data="barData" chart-labels="filter" chart-series="barLabels" chart-options="baroptions" chart-colors="setColors" > </canvas>
In my Controller class, i defined setColors as follows :
In controller.js : $scope.setColors = [{backgroundColor:'rgba(249,166,92,1)',pointBackgroundColor:'rgba(249,166,92,1),pointHoverBackgroundColor:'rgba(249,166,92,1)',borderColor:'rgba(249,166,92,1)',pointBorderColor:'rgba(249,166,92,1)',pointHoverBorderColor:'rgba(249,166,92,1)'}, {backgroundColor:'rgba(90,155,211,1)',pointBackgroundColor:'rgba(90,155,211,1)',pointHoverBackgroundColor:'rgba(90,155,211,1)',borderColor:'rgba(90,155,211,1)',pointBorderColor:'rgba(90,155,211,1)',pointHoverBorderColor:'rgba(90,155,211,1)'}, {backgroundColor:'rgba(120,194,107,1)',pointBackgroundColor:'rgba(120,194,107,1)',pointHoverBackgroundColor:'rgba(120,194,107,1)',borderColor:'rgba(120,194,107,1)',pointBorderColor:'rgba(120,194,107,1)',pointHoverBorderColor:'rgba(120,194,107,1)'}]
solution3
0 2018-01-25 16:44:30
Here are the codes that I have made to make a bar chart with custom settings. Use this attribute chart-dataset-override="datasetOverride" in the canvas html tag:
<canvas id="bar" class="chart chart-bar"
chart-data="expenseData" chart-labels="labels" chart-series="series"
chart-options="chartOptions" chart-dataset override="datasetOverride">
</canvas>
var setGraphDate = function () {
var xData = [];
var yData = [];
$scope.Data.ExpenseRecords.forEach(function (g) {
yData.push(g.PercentOfCompletion);
xData.push(g.TspShortName);
});
$scope.datasetOverride =
{
backgroundColor: "#4E4EFF",
borderColor: "#2E2E99"
};
$scope.labels = xData;
$scope.expenseData = yData;
$scope.series = ['Expense Graph'];
// more options
$scope.chartOptions = {
legend: {
display: false
},
},
title: {
display: true,
text: 'TSP Burn Rate'
},
events: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
}
};
solution4
0 2018-08-04 07:42:01
Just use RGBA where A is Opacity and set it to 1 which defines the solid color. Ex: backgroundColor: [ 'rgba(255, 99, 132, 1)']
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.