Using URLs to customize the colors of line graphs in C3.js

I'm currently facing an issue with customizing the colors of my line graph created from JSON data retrieved from a URL. Below is the code snippet I'm using to generate the chart:

var chart = c3.generate({
  bindto: '#chart',
  data: {
      url: '../URL.JSON',
      mimeType: 'json',
      keys: {
          x: 'Date',
          value: ["Line1", "Line2", "Line3", "Line4"]
      },
      type: 'line'
  },
  axis: {
      x: {
          type: 'category'
      }
  },
  size: {
      height: 500
  },
  colors: {
      'Line1': '#ff0000'
  }
});

Here's the format of my JSON data:

[
    {'Date': '9/23/2014', 'Line1': 12, 'Line2': 54, 'Line3': 23, 'Line4': 5},
    {'Date': '9/22/2014', 'Line1': 56, 'Line2': 18, 'Line3': 25, 'Line4': 0}
]

Despite setting the color for Line1 in the code above, it doesn't seem to reflect on the generated graph. Can anyone provide insights on how to modify the colors for a dynamically loaded c3 graph via URL?

Appreciate any help.

javascriptjsonc3.js

Answer №1

After some exploration, I managed to solve my own query and decided to share the solution here.

I had to include:

color: {
    pattern: ['#363FBC', '#363FBC', '#B73540', '#B73540']
}

Rather than using:

colors: {
  'Line1': '#ff0000'
}

Answer №2

To ensure the correct formatting, make sure the colors parameter is located within the data object:

data: {
    columns: [
        ['category1', 10, 20, 30, 40],
        ['category2', 50, 60, 70, 80],
        ['category3', 90, 100, 110, 120]
    ],
    type: 'line',
    colors: {
        category1: '#ff9900',
        category2: '#cc00ff',
        category3: '#33cc33'
    }
}

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

How do we handle the reception of document.form.submit() in the code behind?

I have a JavaScript function document.form1.submit() and I am wondering how to receive it in the code behind. In which class and method should I be looking? I need to get the value from a textbox and store it in session, but I'm not sure if I need an ...

javascriptasp.netvb.netsubmitsession-state

Tips for sending a form with the <button type="submit"> element

I created a login form and initially used <button type="submit">, but unfortunately, it was not functioning as expected. However, when I switched to using <input type="submit">, the form submission worked perfectly. Is there a JavaScript method ...

javascriptphp

Tips for employing the slice approach in a data-table utilizing Vue

I have a unique situation in my Vue app where I'm utilizing v-data table. The current display of data in the table works fine, but I now want to enhance it by incorporating the slice method. Here is the current data displayed in the table: https://i ...

javascriptvue.jsdatatableslice

A method for looping through the nth positions within a nested dictionary

I am dealing with a nested dictionary of variable length. [{'name': 'stack', 'children': [{'name': 'flow', 'children': [{'name': 'lldp', 'children': [{'name&apo ...

pythonjsonpython-3.xdictionary

The network A-frame with either nav-mesh or collision is malfunctioning; it seems that only one of them is operational at a time,

I have a camera attached to a head template and also added this camera inside a rig. The rig is constrained to a nav-mesh, but I am facing an issue where only one of the controls seems to be working - either the movement control of the rig or the WASD cont ...

javascriptthree.jsaframemultiplayer

React: Error - Unable to use this.setState as a function

When attempting to pass a value from the Child Class to the Parent Class and set it in the Parent's state, I encounter the following error: TypeError: this.setState is not a function Parent Class class Header extends React.Component { constr ...

javascriptjqueryreactjsreact-redux

Delphi XE 6 encountering errors with its System.JSON functions and features

In my test app developed using Delphi XE6, I am exploring the use of Delphi's JSON to manage requests from a web server that I am currently working on. procedure TForm1.Button1Click(Sender: TObject); var Servermethods : TServerMethods1Client; Jso ...

jsondelphidelphi-xe6system.json

Is there a way to detect a class change using jQuery?

Below is an example of a div: <div id="components-reconnect-modal" class="components-connecting-show"> <div id="1"> <div id="2"> <div id="3"> <div id="4"> </div> The ID will remain constant, but the class will ...

javascriptjquery

Navigating Vue and Vuex: Managing interdependent computed values

My unique application is a simplified spreadsheet tool created using Vue and Vuex. It consists of three main components: TableCollection, Table, and Row. The TableCollection contains an array of multiple Table objects, each with its own array of multiple R ...

javascriptvue.jsvuejs2vuex

Extracting information from Python Bottle with the help of AJAX jQuery

I'm currently working on an HTML page that communicates with a Python script returning a JSON string through AJAX/jQuery. I've set up Bottle for basic URL routing functionality. The issue I'm facing is that my browser indicates that the AJA ...

jqueryajaxjsoncorsbottle

Is Ruby on Rails featured in Designmodo's Startup Framework Kit?

I'm curious if the Startup Framework Kit from Designmodo can be seamlessly incorporated into my Ruby on Rails project. While I've had success integrating their Flat-UI-Pro using a gem, I haven't come across one for the Startup Framework yet. ...

javascripthtmlcssruby-on-railsframeworks

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

How to extract and process the datetime field "$time" from a MongoDB JSON document in a C#/SSIS Script Component

Currently, I am facing a challenge in deserializing a MongoDB's datetime field "$time" from a JSON file within the Script Component in SSIS using C#, all without relying on Newtonsoft. Here is my progress so far. Any assistance would be greatly apprec ...

c#jsonmongodbssisscript-component

Tips for auto-saving data in Laravel with AJAX after a few seconds?

I've set up the article post section in my project. I want to automatically save data as a draft in my articles table when creating a new post. I have included the blade file with a form and ajax code, but the ajax code doesn't seem to be working ...

javascriptphpjqueryajaxlaravel-6

How to effectively manage Mongoose Query Exceptions in Express.js

Let's imagine a scenario where I need to execute a Mongoose query in an Express post route: app.post("/login",(req,res)=>{ const username = req.body.username const password = req.body.password User.find({username:username},(er ...

javascriptmongodbrestexpressmongoose

Tips for Maintaining the Execution of a JavaScript Function Within a Class until the Browser Window is Closed (Web Development)

The title might be a little confusing, so let me clarify here: I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be ...

javascripthtmlcss

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Generating an order prior to payment being made by the customer

When a user selects a product and clicks the pay button, they are redirected to Stripe where a new order is created. However, if the user changes their mind and cancels the payment during the Stripe checkout process, the order has already been created. How ...

javascriptreactjsnext.jsstripe-payments

Transferring a selection from a dropdown menu

I am currently working on a dropdown menu where each entry has an ID and a value. The issue I am facing is that when I click on an item on the list, the click-handler is called and passes the div. While the click handler can access the id without any probl ...

javascripthtmlbootstrap-4

Having trouble retrieving parameters from the ajax call in the Razor controller

My task involves dynamically retrieving a PartialView using an AJAX call to update a div on the main page after the value of an input select (dropdown list) changes. Here are the steps I followed: I created a view (without a PageModel) with the model dec ...

jsonajaxasp.net-mvcrazorrazor-pages