How to get rounded columns in c3.js bar chart - javascript

I was wondering if anyone know how to round the corners of the columns in a c3.js bar chart? The hacks I have found online, doesn't seem to work, so I hope somewhere here can help!
Thank you :)
var mph_chart = c3.generate({
bindto: '#mph_chart',
padding: {
top: 10,
right: 50,
bottom: 10,
left: 190
},
bar: {
width: 35,
},
color: {
pattern: ['#3366ff']
},
data: {
x: 'x',
labels:true,
columns: [
['x', 'Porsche Macan','Porsche Macan S','Porsche Macan S Diesel','Porsche Macan Turbo','Porsche Macan GTS'],
['0-62 mph in seconds', 6.7, 5.4, 6.3, 4.8, 5.2]
],
type: 'bar',
},
legend: {
show: true
},
axis: {
rotated: true,
x: {
type: 'category',
tick: {
multiline: false
} // this needed to load string x value
}
},
tooltip: {
show:false
},
bar: {
width: {
ration: .7
},
spacing: 2
}
});

I have tried it for simple bar charts, which provides bars with rounded corner as shown below:-
Here is the jsFiddle:- jsFiddle: Rounded bar charts
.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path {
shape-rendering: auto;
}
You need to basically override certain c3.js functions and provide logic for getting rounded corner by providing multiple points near the corner.
Otherwise all bars in a bar chart are polygons with 4 points. Solution is to provide bars with more points.

Related

Where is this extra whitespace coming from?

I'm creating gauge charts using c3.js. I'm setting the height and width both to 75 because that's the right size of the gauge that I'm wanting, however when they get generated, there's always extra whitespace in the container that's messing me up.
I really want the svg that gets created to have a height of 60 in order to move the label up properly. The problem, is that when I set the height/width of the chart to 60, the size of the gauge itself gets way too small because of this extra whitespace.
I've tried setting the padding of everything that I know of to 0. I've searched through the documentation, there's always a chance that I've overlooked something. I can always try to do some hacky css to get around it, but before I do that, I'd like to change something in the configuration if I can.
Essentially, I want the chart to take up the full size that I specify. It seems that the legend, that I've specified to not show, is still taking up space that the chart should use.
http://jsfiddle.net/kLsox4ya/1/
<div class='row'>
<div class="col-12" id="chart"></div>
<p class="col-12 f-small">PERFECT</p>
</div>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [['data', 0]],
type: 'gauge'
},
gauge: {
fullCircle: true,
startingAngle: 2 * Math.PI,
width: 3,
expand: false,
label: {
show: false
}
},
size: {
height: 75,
width: 75
},
legend: {
show: false
},
interaction: {
enabled: false
}
});
You are going to have a hard time getting that much control over c3. It's doing a lot under the hood to calculate positions for axis, legends, etc... that you aren't even using.
I think you have two options:
Code it yourself using straight d3
Resort to a little hackery. For instance here, I've manually adjust the height after it renders.
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [['data', 90]],
type: 'gauge'
},
tooltip: {
show: false
},
color: {
pattern: ['#565656', '#cfd628', '#e8b532', '#28d632'],
threshold: {
values: [40, 80, 90, 100]
}
},
gauge: {
fullCircle: true,
startingAngle: 2 * Math.PI,
width: 3,
label: {
format: function (value, ratio) {
return '';
},
extents: function (value) {
return '';
}
}
},
size: {
height: 75,
width: 75
},
legend: {
show: false
},
interaction: {
enabled: false
},
axis: {
x: {
show: false
},
y: {
show: false
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
onrendered: function(){
this.svg.attr('height', 55);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class='row'>
<div class="col-12" id="chart"></div>
<p class="col-12 f-small">PERFECT</p>
</div>

How do rotate x-axis labels to left or negative in c3.js?

How do you rotate x-axis labels to left or negative using c3js.org? This example gives the following code:
axis: {
x: {
type: 'category',
tick: {
rotate: 75,
multiline: false
},
height: 130
}
}
But if I try "rotate: -65," instead like this d3js.org example, the x-axis labels disappear from the plot. I am using "type: 'timeseries',", but I don't think that makes a difference.
Should have tried this before posting, but thought I would share...this works:
axis: {
x: {
type: 'category',
tick: {
rotate: -20,
multiline: false
},
height: 35
}
}
It is a combination of rotation and height (doh).

c3 chart not displaying changes on axis

I am trying to display the following chart with the required options on x and y axis but changes on axis are not working. The chart is being displayed but Y axis has not the min, max attributes, position is not the one I passed... What is wrong?
<div id="chart2"></div>
<script>
var chart = c3.generate({
bindto: '#chart2',
data: {
url: "../static/CSV/Chart_data/grades_access.csv",
x:'AC_GRADE',
type: 'scatter'
},
axis: {
y: {
label: "Average grade",
position: "outer-middle",
padding: {top: 200, bottom: 0},
min:0,
max:10
},
x: {
label: "Access grade",
position: "outer-center",
padding: {top: 200, bottom: 0},
min:0,
max:10
}
},
size: {
height: 400,
width: 800
},
zoom: {
enabled: true
}
});
</script>
Well, actually a lot of wrongly defined params.
1. Label position should be defined like this
axis: {
x: {
label: {
text: 'Your X Axis',
position: 'outer-center'
}
}
}
2. Padding affects on min and max so you should set it to 0 if you want.
3. Padding for x axis should use left and right properties.
Maybe something else, just check the http://c3js.org/reference.html thoroughly.

Bar graph colors based on value in c3.js

I have the following bar chart in c3.js (here's a fiddle):
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: '#FF0000'
},
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.
I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).
I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.
Any help would be appreciated. Thanks!
I'm not sure what you did inside color: function, but it is the correct way to set it up. Regarding your desired gradient, it cannot be achieved by just increasing its hex value because going from yellow to green requires decreasing the value. The following example goes from red to yellow:
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: function(d) {
return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
}
},
},
axis: {
x: {
type: 'category
}
},
legend: {
show: false
}
});
fiddle
you can adding in your css like a
.c3-bar-0 {
fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
fill: rgb(0, 255, 204)!important;
}

Dynamic labels for c3.js (also, label colors)

I have the following c3.js code to make a bar graph that builds up from 0 (animates from 0 to the value of each bar). The graph also has a label that animates along with it. The label shows the final value of the graph.
Here's a fiddle
blankData=[
['data1',0,0,0,0],
['data2',0,0,0,0],
['data3',0,0,0,0]
]
chartData=[
['data1',60,10,4,25],
['data2',30,22,5,30],
['data3',30,9,4,17]
]
var chart = c3.generate({
bindto: '#chart',
size: {
height: 500,
},
data: {
columns: blankData,
colors:{
data1:'#00af50',
data2:'#F7931E',
data3: '#FF0000'
},
names:{
data1:'namedata1',
data2:'namedata2',
data3:'namedata3'
},
type:'bar',
labels: true,
},
tooltip: {
show: false
},
legend: {
show: false
},
axis: {
x: {
type: 'category',
categories: ['001', '002','003','004'],
tick: {
format: function (d) {
return "" ; }
}
}
},
transition: {
duration: 2000
}
});
setTimeout(function () {
chart.load ({columns: chartData});
}, 500)
This works nicely, but I'd like the labels to "build up" along with the animated bars. That is, the labels would start at 0 and increase up to the final value of the bar, as the bar animates.
Also, as a side question, would anyone know which attribute in the .css file to change to make the labels colored black? By default, the labels are the same color as the bars.
Any help would be appreciated. Thanks!

Categories