Menu
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.
204
On a chart, select the individual data marker that you want to change. On the Format tab, in the Shape Styles group, click Shape Fill. Do one of the following: To use a different fill color, under Theme Colors or Standard Colors, click the color that you want to use.
Based on the best practice Data Visualization Solutions second bar chart is recommended as all bar charts are represented by the same color, It makes easy for the user to compare values across all bars.
A bar chart (aka bar graph, column chart) plots numeric values for levels of a categorical feature as bars. Levels are plotted on one chart axis, and values are plotted on the other axis. Each categorical value claims one bar, and the length of each bar corresponds to the bar's value.
Click on the graph. Click on a bar in the graph. A 'style' window will appear on the right of the screen. From the style window you can change the colour of the individual bar.
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"
]
},
];
DEMO
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
