Related
I have a C3 chart with data as given in columns.
Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for null values. I'm trying to hide these null values.
var chart = c3.generate({
data: {
x : 'x',
line:{connect_null: true},
columns: [
['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
['data1',null ,30, 200, 100, 400, 150, 250],
['data2',null ,130, 100, 140, 200, 150, 50],
['data3',null ,130, null, 200, 300, -200, 100],
['data4',null ,20, -90, 200, 130, -20, 90],
['data5',-90, 20, -90, 200, 130, -20, 90]
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
}
},
bar: {
width: {
ratio: 0.7 // this makes bar width 50% of length between ticks
},
space:0.05
// or
//width: 100 // this makes bar width 100px
}
});
output(https://i.stack.imgur.com/PVei1.png)
How can I hide the bars with null values?
I'm using C3 js to generate a chart. In my chart, I'm currently using stack bars to showing the data.
My code,
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250]
],
type: 'bar',
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
According to the above code, chart generate as,
Now I need to add an additional 3 line to that chart, as below image,
How can I add Lines to chart using C3 JS? Its document has some line chart with a bar chart. But I can understand how to use it's for my requirement.
You can use data.types to set a chart for each data, Read this: https://c3js.org/reference.html#data-types .And this is a sample code for your problem.
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 150, 160, 140, 145, 250, 100],
['Pink', 50, 50, 50, 50, 50, 50],
['Red', 400, 200, 150, 20, 300, 120]
],
types:{
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
Here is how you can achieve it instead of type use types
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 30, 200, 200, 400, 150, 250],
['Pink', 130, 100, 100, 200, 150, 50],
['Red', 230, 200, 200, 300, 250, 250]
],
types: {
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue','Orange', 'Green', 'Black','Pink', 'Red']
],
axes: {
Black: 'black',
Pink: 'pink',
Red: 'red',
}
},
color: {
pattern: ['#1f77b4', '#ff7f0e', '#2ca02c','#00000', '#ff69b4', '#ff0000']},
axis: {
black: {
show: true
},pink: {
show: true
},red: {
show: true
}
}
});
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<div id="chart"></div>
I created an area chart and want the keep the opacity 1.0 of the area under the line, but when I select a line, the opacity goes away and stays away for all the lines too. I'm wondering how I can keep the opacity for the areas under the lines no natter what?
I've tried doing mouseover/ mouseout but that doesn't do exactly what I want it to all the time, because I have to pause a little bit over the legend for the mouseout to work. I did this by creating a new legend, and here is code for that. I've tried a lot of other simpler things, and tried to code in refreshing the data, but this is the closest I got to following this site:
https://c3js.org/samples/legend_custom.html
//this part is the new legend part, but can be added after the foundation part.
//or it may be omitted too.
function toggle(id) {
chart.toggle(id);
}
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
.data(['data1', 'data2', 'data3'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
d3.select(this).style('background-color', chart.color(id));
})
.on('mouseover', function (id) {
chart.focus(id);
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('mouseout', function (id) {
chart.revert();
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('click', function (id) {
chart.toggle(id);
d3.selectAll(".c3-area").style("opacity", "1.0");
});
//this part is the foundation
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 100, 200, 0, 300, 350, 220]
],
types: {
data1: 'area',
data2: 'area-spline',
data3: 'area'
}
}
});
d3.selectAll(".c3-area").style("opacity", "1.0");
I expected for the opacity to stay 1.0, which it does, until I click on the selection tool on the bottom and then the opacity resets back to something like 0.3, or whatever the default is. There are no error messages for me.
I also tried this and it doesn't work:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
},
style: {
opacity: 1.0
},
legend: {
item: {
onclick: function (id) {
//d3.selectAll(".c3-area").style("opacity", 1.0);
chart.load();
d3.selectAll(".c3-area").style("opacity", 1.0);
//chart.load();
}
}
}
}
});
Using the onrendered function in the config may be what you want
http://jsfiddle.net/9t24cz8q/
var chart = c3.generate({
bindto: "#areachart",
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
}
},
onrendered: function () {
d3.selectAll(".c3-area").style("opacity",1);
}
});
Here, the opacity of the series area moused over in the legend is set to 1, and the others return to 1 afterwards.
When the names of x axis are big the text is overlapping. Is there any property to fix this ? Fit:true doesn't resolve the problem.
Example
You can use x axis tick rotate, example: http://c3js.org/samples/axes_x_tick_rotate.html
There is another solution where you can use
multiline: true
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 0,
multiline: true
}
}
}});
Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.
I have found something similar here How to get rounded columns in c3.js bar chart
but this is the normal bar chart.
It is not working for stacked chart.
I'm not familiar with d3.js.
Thank you :)
This is my code.
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});
Set Data order as null
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},