Usage for angular-chart : colors and fonts

Question

I would like to change font size and border colors for this chart. Hence I don't know how to do it, I tried to put these options at different places but nothing seems to work. I can't get the logic of the binding between angular-chart options and Chart.js options, is there a common way to manipulate them?

Here's the directive:

                <canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"
                        chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas>

Here are the scope definitions:

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        $scope.series = ['Series A', 'Series B'];
        $scope.axes = ["y-axis-1", "y-axis-2"];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
        $scope.colours = [{
            fillColor: 'rgba(151,187,205,0.2)',
            strokeColor: 'rgba(151,187,205,1)',
            pointColor: 'rgba(151,187,205,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(151,187,205,0.8)'
        }]
        $scope.options = {
            datasetFill: false,
            showLines: true,
            elements:
            {
                line:
                {
                    fill: false,
                    tension: 0.0001
                },
                point:
                {
                    radius: 0
                }
            },
            scales:
            {
                yAxes: [
                    {
                        type:"linear",
                        id:$scope.axes[0],
                        gridLines:
                        {
                            display: false
                        }
                    },
                    {
                        type:"linear",
                        id:$scope.axes[1],
                        position: "right",
                        gridLines:
                        {
                            display: false
                        },
                        scaleLabel:
                        {
                            display: true
                        }
                    }]
            },
        };

Changing the colors through chart-colors just doesn't work.

Answer 1

By the look of the options, you're using chart.js 2.0, you need to use the latest angular-chart.js.

Note the attribute is now chart-colors and the color properties have changed in chart.js 2.0.