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>
Related
this is my first question here in stack overflow.
I'm working with C3 and I'm wondering if is possible to align 2 points from end to end.
for example if in my chart I have 100 and another point -100, but I want to pass through the columns that appears in the image.
let me show you what I want:
I want to join/align the two-point that appears in the circle highlighted:
here is my code:
var chart = c3.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", -100],
["data3", null, null, null, null, null, 100],
],
axis: {
y: {
max: 365,
min: 335,
},
},
type: "bar",
types: {
data2: "line",
data3: "line",
},
colors: {
data1: "#f567",
data2: "blue",
},
bar: {
width: {
ratio: 0.5, // this makes bar width 50% of length between ticks
},
},
labels: {
format: function (v, id, i, j) {
return v;
},
},
// or
//width: 100 // this makes bar width 100px
},
});
thank you for your help! :)
I just added this part and it works
line: {
connectNull: true
},
I need to visualize the bar chart with Javascript. So I'm used C3 JS to visualize the chart. Simply I'm using this Bar chart as follows,
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,") // ADD
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
</script>
But the problem is when X-axis consists of the large data set Chart getting cramped. I have more than 700 data.
Have any possible way to avoid this? can I add scroll bar between primary and secondary X-axis?
Google, such a wonderfull thing ;)
https://c3js.org/samples/interaction_zoom.html
or this
C3 / D3 bar chart with horizontal scroll
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>
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.
I've been asked to do this kind of graph (40,9% and 16,4% are examples, they should indicate something like -6% and 9%):
Any idea on how I can get that kind of result, using a javascript library, if possible (but it is not a must) Highcharts?
Thanks
It's possible with HighCharts, Documentation
e.g.
$(function () {
data = [{
valSecond: 25,
valFirst: 62.5
}];
// Build the data arrays
var secondData = [];
var firstData = [];
for (var i = 0; i < data.length; i++) {
// add second data
secondData.push({
name: "Second",
y: data[i].valSecond,
color: "#00FF00"
});
// add first data
firstData.push({
name: "First",
y: data[i].valFirst,
color:'#FF0000'
});
}
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
animation: false,
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'second',
data: secondData,
size: '30%',
startAngle: 270,
endAngle: 360,
innerSize: '20%'
}, {
name: 'first',
color:'#FFFFFF',
data: firstData,
size: '80%',
startAngle: 0,
endAngle: 225,
innerSize: '60%',
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
Jsfiddle
In the highcharts you can adapt donut chart http://www.highcharts.com/demo/pie-donut, remove connectors, set useHTML for dataLabels and rotate by css / rotation SVG element. Missing elements can by added by renderer.