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?
Related
In C3 bar charts, when we set Width Ratio to less than 1, then the bar squeezes but the tooltip area does not. How can we set the tool tip to only show over bar not on the whole area like in the following example.
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},bar: {
width: { ratio: 0.5 }
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script>
<div id="chart"></div>
Have you checked tooltip property? https://c3js.org/reference.html#tooltip-contents
In c3js stacked bar chart, i am trying to create two staged graph having y-axis with different points. But i didnt find the different points plots each other.
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},
grid: {
y: {
lines: [{value:0}]
}
}
});
In the above code, my upper part of yaxis should start from 200 and lower part should from 100. please someone guide me to solve this.
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
}
}
}});
I have a c3.js library which draws a chart inside my angular2 file. The drawing script is inside a function:
private draw() {
let chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
],
type: "line"
}
});
}
c3.js library provides a possibility to change the type of the chart from line to spline, by using following function:
chart.transform('spline');
But unfortunately I dont have an access to this chart variable, since its inside the draw() function.
I want to put this chart.transform('spline'); function inside a button, to let the user change it dynamically.
~I need some way to make it work, any help highly appreciated!
chart:any;
private draw() {
this.chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 130, 50, 20, 10, 40, 15, 25, 390],
['data2', 50, 20, 10, 40, 15, 25, 542, 30, 200, 100, 333, 150, 250]
],
type: "line"
}
});
you can use this.chart anywhere
try to initialize chart :
chart: any = {};
then call it
this.chart.transform('spline');
How can i pass x,y values to generate a chart where the x values are not automatically sorted? if i use this example the x starts on 2 because its the lowest value.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 50, 80, 2,100, 230, 300],
['data1',400, 200, 100, 50, 25, 12]
]
}
});
If you want to not sort the x values, then you need to treat it as a category axis
var chart = c3.generate({
data: {
columns: [
['data1',400, 200, 100, 50, 25, 12]
],
type: "bar",
},
axis: {
x: {
type: 'category',
categories: [50, 80, 2,100, 230, 300],
}
}
});
See http://c3js.org/samples/categorized.html