Chartjs-Angular-chart.js, how to change colours labels

by

1👍

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…

0👍

Try adding this to your controller: 

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

Leave a comment