Tips on setting individual colors for bars in a bar graph using chart.js

I am looking to customize the colors of the bars in this graph according to my own preferences. I do not want to use random colors for the bars (or set of bars).

var ctx = $("#myBarChart").get(0).getContext("2d");
var data = {
labels: ["a","b","c","d","e","f","g"],
datasets: [
    {
        label: "My First dataset",
        /*fillColor: "rgba(84,255,159,1)",
        highlightFill: "rgba(84,255,159,0.75)",*/
        data: [5,3, 4, 2, 1, 3, 1]
    },
]};

var myBarChart = new Chart(ctx).Bar(data);
var width = $('canvas').parent().width();
$('canvas').attr("width",width);
new Chart(ctx).Bar(data);
javascriptjqueryhtmlcsschart.js

Answer №1

To retrieve the data sets and individual bars, you can utilize an indexer similar to an array:

accessDataset.bars[0].fillColor = "#FF5733";
accessDataset.bars[0].highlightFill = "#FFC300";
accessDataset.bars[1].fillColor = "#900C3F";
accessDataset.bars[1].highlightFill = "#C70039";

Answer №2

give this a shot

let myChart = new Chart(ctx).Bar(data, options);

 let data = {
    labels: ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape"],
    datasets: [
        {
            label: "Bars - Set 1",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "Bars - Set 2",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
 //etc..
};

Answer №3

With the latest version of ChartJS (2.4.0), it is now possible to assign a unique color to each element in your dataset's data array.

For example:


data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: ["#5e4fa2", "#745998", "#8a638d", "#a06d83", "#b57678", "#cb806e", "#e18a63"]

To learn more about this feature, visit: http://www.chartjs.org/docs/latest/charts/bar.html

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

The Vue-cli webpack development server refuses to overlook certain selected files

I am attempting to exclude all *.html files so that the webpack devserver does not reload when those files change. Here is what my configuration looks like: const path = require('path'); module.exports = { pages: { index: ...

javascriptvue.jswebpackwebpack-dev-server

What is the best way to customize the style of a react.js component upon its creation?

Is there a way to set the style of a react.js component during its creation? Here is a snippet of my code (which I inherited and simplified for clarity) I want to be able to use my LogComponent to display different pages of a Log. However, in certain ins ...

javascriptcssreactjsmaterial-uireact-with-styles

Validate the checkbox with Vuelidate only when the specified property is set to true

I have a website login form where users may need to check a specific checkbox before logging in. Here is part of the Vue component code that handles this functionality: <script setup lang="ts"> import {ref, defineProps} from 'vue&a ...

javascriptvue.jsvuejs3vuelidate

Tips for getting rid of the ghosting effect or white background of a PNG image

As a new developer, I am currently working on my personal chess project and have recently mastered the drag and drop system. However, I would like to explore different methods for achieving this. Is there a way to eliminate the white background in the proc ...

javascriptcssimagedragchess

Implementing Google Places reviews on a website with the help of JavaScript

Struggling to display the Google reviews for my company on our website, I can't seem to make it work. I've attempted to use this code: <script> $(function() { var people = []; $.getJSON('https://maps.googleapis.com ...

javascriptjsongoogle-places-api

retrieve the designated document and save it

I am currently hosting some PHP files on a web hosting site. My goal is to allow users to upload a specific file from their desktop to my server with just the click of a button. The user shouldn't have to provide the file path, as I already know it. F ...

javascriptphpfile

Creating an Indicator for Vertical Scrollbars using HTML and CSS

I am currently working on a project where I am trying to replicate the vertical scrollable bar and containers seen on this specific website: https://i.sstatic.net/ZsvuO.png Essentially, my website consists of various divs and I would like to implement a ...

jqueryhtmlcss

Problem with app-theme.html not being recognized within a custom element

While developing a web app with polymer, I encountered an issue with a custom element called side-bar. I have a separate file named app-theme.html where all the styles for the app are defined. However, when I moved the side-bar element into its own templat ...

htmlcsspolymerpolymer-1.0

Creating a request again after a promise has been fulfilled in Angular

I'm struggling to understand a simple concept here. My objective is to retrieve data from a service, which fetches data from an endpoint, and then be able to update that stored data by refreshing the endpoint. .service('myService', function ...

javascriptangularjspromise

Using the JSTL c tag within a JavaScript function

Is there a way to integrate jquery fullcalendar with MySQL using Spring MVC? I need to fetch schedule data from MySQL and display it on the calendar. Can you please demonstrate how to do this? <script type='text/javascript'> $( ...

javascriptspringjstlctags

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

javascriptreactjstypescripttypesdiscriminated-union

The file path cannot be found: module.filename is not defined in Sequelize for Node.js

I'm currently going through a Sequelize and Node.js tutorial that I found here. However, I've encountered an error on line 4: TypeError: Path must be a string. Received undefined const fs = require('fs'); const path = require('pa ...

javascriptnode.jspostgresqlpostgresql-9.6

ionic framework causing issues with custom filter for angularjs

The custom filter:searchFilter is functioning properly in regular HTML. Here's a demo: http://codepen.io/anon/pen/Oyydxa. However, the same function does not seem to work within the Ionic framework. <input type="search" placeholder="Search" ng-mod ...

javascriptangularjscordovaionic-frameworkangularjs-filter

"Automatically generate a shopping cart in Strapi when a new user

Just starting out with Strapi and I'm really loving the headless CMS platform. I decided to follow a tutorial and ended up building a simple e-commerce style website using Node/Express and Next.js. One cool feature I added was automatically creating a ...

javascriptnode.jsnext.jsstrapi

Setting up a project with Angular 2 and NodeJS

Hello there, I have some inquiries about organizing the project structure of a MEAN application with Angular2. Initially, I followed the introductory guide on angular.io to create a basic Angular2 app. Now, I am attempting to incorporate this app into a N ...

javascriptnode.jsnpmangularproject-structure

Achieving Vertical Alignment of Two Divs with CSS

I've come across several solutions to my issue, but none of them seem to work in my current situation. I have a banner at the top of my site with two floated columns, and suspect that the navigation menu in the right column may be causing the problem. ...

htmlcsscss-floatvertical-alignment

What could be causing the malfunction of the Slide Deck on my website?

I recently incorporated the HTML 5 boilerplate into my website development process. I decided to utilize both the JQuery slide deck plug-in and the JQuery pretty photo plug-in for enhanced functionality. However, I encountered an issue where placing these ...

jqueryhtml

Mongoose and BlueBird emerge victorious from fulfilling their promise

When using mongoose and bluebird as a promise framework, I encounter an error whenever I use "save" or "remove": Warning: a promise was created in a handler but was not returned from it I have spent days trying to resolve this issue. I have tried various ...

javascriptnode.jsmongodbmongoosebluebird

Understanding the functionality of imports within modules imported into Angular

I have been scouring through the documentation trying to understand the functionality of the import statement in JavaScript, specifically within the Angular framework. While I grasp the basic concept that it imports modules from other files containing expo ...

javascriptangulartypescriptnpm

What could be causing the npm test to choose the incorrect Immutable.js Map factory function?

When I execute npm test, I encounter a compiler error after creating a Map using the factory function that takes in the 'collection' argument (refer to ). Interestingly, there are no issues when using the factory function with the 'obj' ...

javascriptnode.jstypescriptkarma-jasmineimmutable.js