CODEWITHSUNDEEP
angularjschart.js
Michael Merletti
Michael Merletti

Reputation: 43

angular-chart.js, how to change colours labels

I am trying to change the colours of axis labels in angular-chart.js. I read the API, I try to set chat-colours, it's ok for the bar but I don't find for the x or y labels, it's always gray... thx for help.

<canvas id="bar" class="chart chart-bar" chart-data="main.commissionData"     chart-labels="main.commissionLabels" chart-series="main.commissionSeries" chart-colours="[{fillColor:'rgba(169, 99, 246, 0.8)'},{fillColor:'rgba(179, 173, 57, 1)'}]">
</canvas>

Upvotes: 2

Views: 2219

Answers (2)

mayank harbola
mayank harbola

Reputation: 21

you can change axis and title colors using chart-options

HTML code

//Added chart-options property for x,y axis color
<canvas id="line" class="chart chart-bar" chart-options = "mychart.options" chart-data="mychart.data" chart-labels="mychart.labels" chart-colors="mychart.colours"></canvas>

Controller code

 var json = {
        "series": ["SeriesA"],
        "data": [["90", "99", "80", "91", "76"]],
        "labels": ["01", "02", "03", "04", "05"],
        "colours": [{ // default
            backgroundColor: "#F8D3E0",
            pointBackgroundColor: "#F8D3E0",
            pointHoverBackgroundColor: "#F8D3E0",
            borderColor: "#F8D3E0",
            pointBorderColor: '#F8D3E0',
            pointHoverBorderColor: "#F8D3E0"
        }],
        "options":{
            legend: {
                labels: {
                     fontColor: '#F8D3E0'
                    }
                 },
           title: {
               display: true,
               fontColor: '#F8D3E0', // can Add title color also
               text: 'Custom Chart Title'
           }     ,
           scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero:true,
                       fontColor: '#F8D3E0' // y-Axes color you want to add
                   },
               }],
             xAxes: [{
                   ticks: {
                       fontColor: '#F8D3E0'// y-Axes color you want to add
                   },
               }]
           } 
        }
      };
  $scope.mychart= json;

Hope this will Help...

Upvotes: 2

Fergus
Fergus

Reputation: 2992

Try adding this to your controller: 

var data = [
    {
        color: "rgb(134, 202,54)",
        highlight: "rgb(100,100,100)"
    },
 ]

Upvotes: 0

Related Questions