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.
Related
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 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).
I have the following csv file to plot two different sets of data: normal and global with its respective regression.
Access grade global,Grade_global,Regression_global,Access grade,Grade,Regression
11.48,6.0,5.66,11.48,6.0,5.74
11.43,5.6,5.63,11.43,5.6,5.69
12.13,5.9,6.16,12.13,5.9,6.55
10.48,5.0,4.91,10.48,5.0,4.52
10.54,4.7,4.96,10.54,4.7,4.6
10.23,5.1,4.73,10.23,5.1,4.22
12.27,5.5,6.26,12.27,5.5,6.71
11.13,4.2,5.4,11.13,4.2,5.32
13.7,10.0,7.34,13.7,10.0,8.46
I want to create a scatter plot with all the dots, each group in a different color and with its respective linear regressions (dots of the regression already calculated). I am trying to assign "Access grade global" and "Access grade" as x values to both the "Grade"/"Grade_global" and "Regression"/"Regression_global"
How can I do it? My actual code is:
var chart = c3.generate({
bindto: '#chart0',
data: {
url: '../static/CSV/Chart_data/grades_access_hs.csv?rnd='+(new Date).getTime(),
xs: {
Grade_global: 'Access grade global',
Grade: 'Access grade'
},
type: 'scatter',
types: {
Regression_global: "line",
Regression: 'line'
},
},
axis: {
y: {
label: {
text: "Average grade",
position: "outer-middle"
},
min: 1,
max: 9
},
x: {
label: {
text: "Access grade PAU",
position: "outer-center"
},
min: 9,
max: 14
}
},
size: {
height: 400,
width: 800
},
zoom: {
enabled: true
},
legend: {
show: true,
position: 'inset',
inset: {
anchor: 'top-right',
x: 20,
y: 300,
step: 1
}
},
})
I get the error: Uncaught Error: x is not defined for for id = "Regression_global".
Thanks!
You are defining your x in the wrong way. Referring to this example, the chart constructor uses xs.
In your chart, defining the xs like this:
....
data: {
url: '../static/CSV/Chart_data/grades_access_hs.csv?rnd='+(new Date).getTime(),
xs: {
'Access grade global': 'Access grade',
'Calculus I global': 'Calculus I',
},
type: 'scatter'
},
....
should work.
Plunker
I'm trying to push the values on the x category axis to be on the sides of the bars, not in the middle. Apparently it is possible to put the ticks there, but can values go under the ticks as well?
var chart;
chart = c3.generate({
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.98
}
},
axis: {
x: {
type: 'category',
categories: [10, 50, 100, 500, 2000, 5000],
tick: {
centered: false
}
}
},
legend: {
show: false
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>
It's not the prettiest answer, and the last label gets chopped off (you'll have to investigate c3's padding options), but these 2 lines after you've rendered the chart do the trick:
// use c3's internal x scale to get the width of one bar
var width = chart.internal.x(1) - chart.internal.x(0);
// shuffle all the tick label tspans along by half a bar's width
d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);
var chart;
chart = c3.generate({
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.98
}
},
axis: {
x: {
type: 'category',
categories: [10, 50, 100, 500, 2000, 5000],
tick: {
centered: false
}
}
},
legend: {
show: false
}
});
var width = chart.internal.x(1) - chart.internal.x(0);
d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>
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.