So I am having troubles trying to change the colors of my line graph that is generated from JSON from a URL. Here is my code 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'
}
});
And here is my JSON format:
[
{'Date': '9/23/2014', 'Line1': 12, 'Line2': 54, 'Line3': 23, 'Line4': 5},
{'Date': '9/22/2014', 'Line1': 56, 'Line2': 18, 'Line3': 25, 'Line4': 0}
]
For some reason the color does not change at all for Line1 with the colors attribute set. So I was wondering if anyone knew how to change the colors to a url generated c3 graph.
Thankyou.
The colors
param should be inside the data
object, like:
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
],
type: 'bar',
colors: {
data1: '#ff0000',
data2: '#00ff00',
data3: '#0000ff'
}
}
I figured out the answer to my own question so I thought that I would post it here.
I had to add:
color: {
pattern: ['#363FBC', '#363FBC', '#B73540', '#B73540']
}
Instead of:
colors: {
'Line1': '#ff0000'
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With