Modifying Line Colors in Angular-charts.js: A Step-by-Step Guide

I have different colors specified in my scope:

 $scope.colors = [{ // light grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointHoverBackgroundColor: 'rgba(148,159,177,1)',
        borderColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#70ff06',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointHoverBackgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#2129ff',
            pointHoverBorderColor: 'rgba(77,83,96,0.8)'
        },
        { // black
            backgroundColor: 'rgba(0,0,0,0.2)',
            pointBackgroundColor: 'rgba(0,0,0,1)',
            pointHoverBackgroundColor: 'rgba(0,0,0,1)',
            borderColor: 'rgba(0,0,0,1)',
            pointBorderColor: '#000000',
            pointHoverBorderColor: 'rgba(0,0,0,0.8)'
        }];

I have also defined a canvas element in the HTML:

<canvas id="line" class="chart chart-line" chart-data="data"
                    chart-labels="labels" chart-series="series" chart-options="options" chart-colors="colors"
                    chart-dataset-override="datasetOverride" chart-click="onClick">
            </canvas>

However, despite my efforts to update "$scope.colors" and use "chart-colours" attribute instead of "chart-colors", the changes are not reflecting on the page. Does anyone know how I can resolve this issue?

javascriptangularjschartsangular-chart

Answer №1

To implement this, make sure to utilize the datasetOverride property.

 <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"
          chart-dataset-override="ctrl.datasetOverride"
 ></canvas>

In the controller section,

 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"
                ]
            },

            ];

For a demonstration, check out the DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Promise resolution issue within TestBed.compileComponents in Angular 2 testing

I'm currently in the process of developing a test module for a module within my Angular2 component that utilizes the templateUrl property. As a result, I need to make the TestBed.compileComponents async call to compile before conducting any testing. ...

javascriptunit-testingangulartestingpromise

Suggestions for placing a script under the scripts menu in Illustrator CS5.1

My script for Adobe Illustrator CS5.1 is not showing up in the scripts menu despite trying to place it in various directories such as: C:\Program Files\Adobe\Adobe Illustrator CS5.1\Presets\en_GB\Scripts\ C:\Progra ...

javascriptadobe-illustrator

When performing an Angular HTTP post, additional parameters are automatically included in the request

Within a directive, I have the following code block: scope.progressCourse = -> req_data = course_id: scope.course.id success: true $http.post( "<%= Rails.application.routes.url_helpers.progress_course_path %>", req_data ).t ...

javascriptjqueryruby-on-railsangularjs

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Hey there! I've put together a custom modal window in Angular Material by combining the custom modal window example with the Angular Material slider demo. Everything is working well except for the fact that the sliders inside the modal window are not ...

javascriptcssangularjsangular-material

Leverage JSON files for pagination in NextJS

I am currently developing a science website where the post URLs are stored in a static JSON file. ScienceTopics.json- [ { "Subject": "Mathematics", "chapters": "mathematics", "contentList": [ ...

javascriptreactjsjsontypescriptnext.js

Associating a mouse click with elements within a repetitious function

Currently, I am importing children of element with ID #parentEle, creating a duplicate of each child and adding it to an array with a new ID - #eleCopy(i). I am facing an issue where I am trying to implement a click function on the original imported objec ...

javascriptjquery

Creating a date in the style of a credit or debit card expiration date

I need to create dates in the format of 'Thru: 12/20' (similar to a credit/debit card expiration date). How can I generate a date in this specific format? new Date().toJSON().slice(0,7).split('-').reverse().join('/') Although ...

javascriptvue.jsdate

Preventing special characters in an HTML text box: Tips and tricks

I'm facing an issue with my HTML form where special characters like ! or ^ or £ in the password text box are being converted to different characters on my server, such as %. Is there a way to ensure that the exact same characters entered by the user ...

javascripthtml

The Vue component seems to be missing the definition of $v for Vuelidate

I've been struggling to resolve this issue. The error message I am encountering pertains to a Vue component that is utilizing the Vuelidate library for form validation. Do you have any insights on what might be causing this error? Uncaught TypeError: ...

javascriptvue.jsvuejs2vue-componentvuelidate

Discover the magic of retrieving element background images on click using jQuery

I am attempting to extract the value for style, as well as the values inside this tag for background-image. Here is the script I have tried: function getImageUrl(id){ var imageUrl = jQuery("."+id+". cycle-slide").attr("src"); alert('' + ima ...

javascriptjqueryhtmlbackground-image

I'm curious – what exactly does `useState(null)[1]` do within React hooks?

Recently, I've started utilizing React hooks in my code. There was this interesting syntax useState(null)[1] that caught my attention, although now I can't seem to recall where I first saw it. I'm curious about the difference between useSta ...

javascriptreactjsreact-hooks

JavaScript and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

javascriptjqueryhtmlangularjs

Using Axios to retrieve data from a MySQL database is a common practice in web development. By integrating Vue

I have developed another Vue.js admin page specifically for "writer" where I can display post data fetched from a MySQL database. The admin page called "admin" is functioning properly and responding with all the necessary data. The following code snippet ...

javascriptlaravelvue.jsaxios

Split the text using the newline character (' ') and not the double newline character (' ')

Looking to create a filter that separates all \n and combines them back as \n\n. Is it possible to only target the single \n without affecting the double \n\n? Currently, the issue arises when the input field loses focus, caus ...

javascriptsplitvue.js

My goal is to design a pathway that will automatically reroute users to the homepage as soon as they log in

Here is the code snippet for my app.js file: (function () { 'use strict'; angular .module('app', ['ngRoute', 'ngCookies']) .config(config) .run(run); config.$inject = ['$routeProvider', &apos ...

angularjsnode.js

Tips for filling in the values for the options in a select dropdown menu

Currently, I am facing a strange bug related to the select element. Whenever I open the dropdown, there is always a mysterious black option at the top. This is how my HTML looks like: This particular element is part of my test controller. <select ng- ...

javascripthtmlangularjs

Solution for resolving AMP Error related to the Imply script tag within a nextjs application

Tag located outside the document head, which should only be a direct child of the document head. Error: Invalid attribute: data-amp-bind Fix: Make sure you are using only allowed attributes for AMP components. If you are using custom attributes, they sho ...

javascriptnext.jsasynchronous-messaging-protocol

Collaborating on interconnected documents: population dynamics and sophisticated modeling techniques

As someone who is fairly new to these technologies, I'm unsure if I am doing this correctly. I am attempting to display the name of the category in the table instead of the id (which is from the ObjectId schema field) for all the Category documents r ...

javascriptnode.jsmongodbexpressmongoose-schema

Is it necessary to have separate rootscopes for each individual app?

According to a discussion on Stack Overflow, it is indeed possible to incorporate multiple apps into the same page. Additionally, the documentation for AngularJS states that Every application has a single root scope So, if I include two different apps ...

angularjsrootscope

Display the div if the input field is left blank

Is there a way to display the div element with id="showDiv" only if the input field with id="textfield" is empty? <form action=""> <fieldset> <input type="text" id="textfield" value=""> </fieldset> </form> <div id="sh ...

javascripthtmlinputshow