Customizing colors for the data rows in C3.js

Currently, I am utilizing c3js to create a chart using row data and I am interested in implementing specific colors.

var chart = c3.generate({
    data: {
        x:'x',
        rows: [
             ['x','Winter 2007-2008','Winter 2008-2009','Winter 2009-2010'],
             ['2013-01-01',12,30,3],
             ['2013-01-02',123,200,22],
             ['2013-01-03',21,100,54],
             ['2013-01-04',32,400,23],
             ['2013-01-05',12,150,12],
             ['2013-01-06',34,250,15]
        ],
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

Everything seems to be working well so far, however, I would like to assign custom colors to each line.

When dealing with column data, achieving this is quite straightforward. You can refer to this example:

data: {
    x:'x',
    columns:[[]]
},
color: {
        pattern: ['#1f77b4', '#aec7e8', '#ff7f0e']
}

Is it possible to accomplish the same with row-oriented data?

Answer №1

To add color functionality to the chart, you can use the following code snippet:

    color: function (color, d) {
        // d will represent 'id' when called for legends
        var colors = {           // Color codes mapping for data series.
            'Winter 2007-2008': '#ff0000',
            'Winter 2008-2009':'#00ff00',
            'Winter 2009-2010':'#0000ff'
        };
        if(typeof d === 'object') {
            return colors[d.id];
        }else {
            return colors[d];
        }
        //return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
    }

See a working example here:- jsFiddle

Answer №2

Pattern of colors must be effective:

color: {scheme: ['#ff0000','#00ff00','#0000ff']},

Link to Code Example.

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

What is the best way to integrate a CommonJS module into an ES6 module within a Node.js

I am working on a node app and I want to adopt the ES6 module format without transpiling down to ES5. However, I still want to integrate older libraries like express and socket.io that use CommonJS / require format. What solutions are available for combi ...

Attempting to automatically change the selected input radio button every 3 seconds using HTML

Hey there, I'm just starting out with coding and StackOverflow. I'm attempting to create a basic slider but for some reason, the images are not changing. My goal is to cycle through checked input radio buttons every 3 seconds, but something seems ...

What benefits does utilizing jade or another template in node.js bring?

What are the benefits of using jade or other templates in node.js (express.js) instead of just sending HTML files with the send method? And what exactly does it mean to render HTML? ...

An array containing various types of data within a single structure

Is there a way to combine all the elements of this array into a single variable, rather than accessing them one by one as shown in the code snippet below? I want to store all the data within one variable without specifying an index for each element. Below ...

Removing the Angular controller instance

To make things easier, the issue has been condensed under "The problem" for quick reference. For more details, continue reading for background information and notes before providing an answer. Thank you! The problem My goal is to remove the instance of a ...

Experiencing a blank page error when trying to render a partial view using Angular.js

Can someone assist me? I am encountering an issue where the partial view is not rendering properly using ui-router in Angular.js. Below is my code snippet. <!DOCTYPE html> <html lang="en" ng-app="Spesh"> <head> <meta charset="utf- ...

Ways to send a variable to ngIf

header.component.html <ng-container *ngFor="let headerMenu of headerMenus"> <li *ngIf="headerMenu.ngif"> <a (click)="onClick(headerMenu.menu)" [class]="headerMenu.menu"> <img [src]="headerMenu.src" [alt]="heade ...

What is the process of importing schema and resolvers in GraphQL-Yoga or Node?

After discovering that graphql-yoga V1 is no longer supported, I'm aiming to upgrade to graphql-yoga/node V2. Although I've reviewed the official documentation on the website, I'm encountering difficulties in migrating from V1 to V2. Is it ...

What is the best method for passing information to my frontend JavaScript files using Express?

When using ejs to render my html pages, I pass in data in the following manner: collection.find({}).toArray( function (err, results) { res.render('index', { results: results, ...

There are no entities returned when using Breeze.js getEntities method

I have encountered an issue when using Breeze.js along with an Asp.net Web Api (with Entity Framework 6 Code First). After calling executeQuery(query), I am unable to retrieve entities. Here is the JavaScript code snippet: entityManager.executeQuer ...

Retrieve the initial element within a nested array by utilizing the node.js MongoDB driver

In my Node.js application, I am utilizing the mongodb driver to interact with my MongoDB database. Within my document store named companies, here is a sample data structure: { companyName: "My Company", users: [ { first: "Nick", last: ...

Unlock the potential of Bootstrap 4 in Vue.js 2 without the need for bootstrap-vue

I'm interested in finding a way to incorporate bootstrap 4 into my vue.js 2.6 framework. Despite the abundance of tutorials available, many of them are outdated as of late 2020, or they insist on using bootstrap-vue, which introduces unwanted addition ...

The line numbers are displayed in an unconventional manner next to the textarea

Creating a new text editing tool, here is the code snippet:- const editor = document.querySelector('#ta'); const lc = document.querySelector('#line-count'); var lcDiv = document.createElement('p'); // Function to calculate ...

Adjust the counter by increasing or decreasing based on the selection or deselection of tags

Currently, I am utilizing Next.js to manage a question form that consists of multiple questions with multiple answers. Users have the option to select one or multiple tags for each question. When a user selects one or more tags to answer a question, it sho ...

Storing data efficiently with Angular 2's local storage service

I am attempting to create a ToDoList using localstorage within a service. add.component.ts export class AddComponent implements OnInit { item: Item[]; constructor( private router: Router, private itemService: ItemService) { } ...

Retrieve the HTML structure from an AJAX response

I'm working on an Ajax call in my code: callAjaxController: function(){ var url = Routing.generate('ajax_price'); $.ajax({ type: "GET", url: url, cache: false, success: funct ...

Can a print or echo statement in PHP return a number value instead of a string?

Is it possible for the output of a print or echo statement in PHP to be a numerical value, or is it always a string? For example: Here is a snippet of PHP code: <?php $num = 10; ?> And here is some JavaScript code: function isLarge(number) { ...

Retrieve the text within a WebElement that includes HTML elements

Can anyone help me figure out how to retrieve the Inner HTML of a WebElement using Selenium? I've been experimenting with the following code snippet: WebElement dataElement = driver.findElement(By.id("data")); dataElement.getText(); //returns not ...

Encountering an Issue with jQuery 1.9.1 when Checking the #idCheckbox in Internet Explorer Versions 7 and 8

Currently, I am utilizing jQuery version 1.9.1 and my code is functioning smoothly on IE9, Firefox, and Chrome. However, the issue arises when trying to make it work on IE7 and IE8, where it fails to execute. In my setup, there is an input checkbox with t ...

"Integrate a URL segment into the primary URL with the help of AngularJS or JavaScript

One interesting case involves a URL path that is structured in the following way. http://localhost:12534/urlpart1/urlpart2?querystring=140 The challenge here is to replace "urlpart2" with "urlpart3" using either javascript or AngularJS. One approach is t ...