Is there a way in C3.js for to add COLOR to an horizontal line, the level 0 in axis y in bar graphs? By default you have this graph:
What I need is this:
Any idea? thanks.
UPDATE: I've made a line with this, but I need to add color.
grid: {
y: {
lines: [
{value: 0, text: ''}
]
}
}
In case anyone need it, this does the magic:
https://github.com/c3js/c3/issues/362#issuecomment-46377069
The reference has an example for horizontal (x-axis) lines: https://c3js.org/samples/grid_x_lines.html
// Copied from the reference
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
],
axes: {
sample2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{value: 50, text: 'Label 50 for y'},
{value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
{value: 350, text: 'Label 350 for y', position: 'middle'}
]
}
}
});
Also for x-axis lines (vertical): https://c3js.org/samples/grid_x_lines.html
Related
I would like to change the size of my legend because after using a position inset with bottom-left my legends elements doesn't have the same space between element:
https://user-images.githubusercontent.com/9460795/58431609-d9e77400-80ae-11e9-97c6-9efbd89bd558.png
I already tried to change the bar width but nothing happen
legend: { position: 'inset', padding: 10, inset: { anchor: 'bottom-left', x: -5, y: -50 - (20 * (this.selectedData.length - 2)), step: 1 }, item: { onmouseover: (id) => this.mouseOverLegendItem(id), onmouseout: (id) => this.mouseOutLegendItem(id), onclick: (id) => this.onmouseClickLegendItem(id) } }, bar: { width: 30 },
How can i fix it please ?
I'm newbi on c3 sorry :(
C3 version:"^0.6.13",
D3 version: "^5.9.1"
Unfortunately this fixed width seems to be baked into the positioning code when the legend is of type 'inset'. If you want the legend to display horizontally with no extra spacing between the items you're going to have to set the legend position as 'bottom'.
There is if you do that a hack whereby you can move that bottom legend into the chart area to mimic an inset though, but it's fairly brittle - see https://jsfiddle.net/5odf8w0x/
var chart = c3.generate({
data: {
columns: [
['data1ytuytuytutyuu', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 10, 20, 30, 40, 60, 70]
]
},
legend: {
position: 'bottom'
},
onrendered: function () {
console.log(this, this.config);
var x = +d3.select(this.config.bindto).select(".c3-legend-item text").attr("x");
x -= 70; // for axis and margin
d3.select(this.config.bindto).selectAll(".c3-legend-item").attr("transform", "translate(-"+x+",-50)");
}
});
I have made a stacked bar chart using c3 libraries and would like to add icons to each column (using c3 or d3). I went through their documentation but there doesnt seem to be any relevant functionality!
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100],
['data2', 130, 100, 140]
],
type: 'bar',
groups: [['data1', 'data2']]
},
});
You can import font-awesome and then (mis)use c3's label format configuration to set an icon for each series
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: {
// format: function (v, id, i, j) { return "Default Format"; },
format: {
data1: function (v, id, i, j) { return "\uf1ec"; }, // a calculator
data2: function (v, id, i, j) { return "\uf212"; }, // a book
data3: function (v, id, i, j) { return "\uf1ae"; }, // a human
}
}
},
grid: {
y: {
lines: [{value: 0}]
}
}
});
You'll need this css rule -->
.c3-chart-text .c3-text {
font-family: 'FontAwesome';
}
And to import the FontAwesome css to get access to the glyphs (this may be an old version) -->
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
The glyph codes can be found here -->
https://fontawesome.com/cheatsheet
Example:
https://jsfiddle.net/h0g1fwpa/19/
I am using c3js to draw a line chart. x-axis displaying labels, which is rendered in between axis marker.
It is using axis.x.type : 'category'. otherwise the lines are not creating.
But I want to display it on x-axis marker, not in between them.
here is sample code
var chart = c3.generate({
data: {
x:'xaxis',
columns: [
['xaxis','cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category'
}
}
});
Here is sample code on jsfiddle https://jsfiddle.net/abhinaw/kyjgzd62.
Is there a way to do this?
Thanks
Use axis.x.tick.centered option:
axis: {
x: {
tick: {
centered: true
}
}
}
See updated fiddle.
Let's take for example following chart http://c3js.org/samples/chart_bar.html
but replace columns data with the data below:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 0, 100, 0, 150, 250],
['data2', 130, 0, 140, 200, 0, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
As we see we have a lot of white space or ZERO value bars, how can we remove it and remove white space. (not hide, I know how to hide it with CSS)
Image example, what should be removed
as googled in https://github.com/c3js/c3/issues/81
you need replace 0 to 'null' and add this:
line: {
connectNull: true,
},
var chart = c3.generate({
data: {
columns: [
['data1', 30, null, 100, null, 150, 250],
['data2', 130, null, 140, 200, null, 50]
],
line: {
connectNull: true,
},
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);
Just add
line: {
connectNull: true,
}
in your c3.generate block.
It will connect all points/bars/... on the chart with a zero value in between.
It works with null as well as with 0.
I am creating a line chart using c3.js. I want to remove the default indicator line to x-axis with the tooltip.
I have tried tooltip formatting but the line remains same.
How this can be done?
grid:{
focus:{
show:false
}
}
May be at that time when person answer this question config parameter not provided but now you can do it through above mention configuration. Reference http://c3js.org/reference.html#grid-focus-show
Example code below
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
grid:{
focus:{
show:false
}
}
});
Just override the following css property in .c3-xgrid-focus class:-
.c3-grid .c3-xgrid-focus {
visibility : hidden !important;
}
I could not quickly find a config parameter to turn this feature off in the api doc.
point: {
show: false
},
False to hide the points and true for show the points
Note:
Make sure that you are going to write this after the loading the data and along with your other settings in c3 Generate function
Here is the Example:
http://c3js.org/reference.html#point-show
In below code I have highlighted the code with a comment:
var chart = c3.generate({
bindto: '#CYCLE_CHART',
data: {
columns: [
["Cycletime"].concat(objCycle.cData), ["Downtime"].concat(objDowntime.dData), ["StdCycletime"].concat(objStdCycle.stdCData), ["StdLoadunloadtime"].concat(objStdLUtime.stdLUData),
],
type: 'spline',
types: {
Cycletime: 'bar',
Downtime: 'bar'
},
names: {
Cycletime: 'Cycle time',
Downtime: 'Load time',
StdCycletime: 'Std Cycle time',
StdLoadunloadtime: 'Std Load time'
},
},
axis: {
x: {
label: {
text: 'Cycles',
position: 'outer-center'
},
max: 10,
min: 1,
},
y: {
label: {
text: 'Seconds',
position: 'outer-middle'
},
max: Y_axis,
min: 1,
}
},
// Here!
point: {
show: false
},
tooltip: {
show: true
}
});
According to BonifatiusK´s comment, you should hide them by editing the chartOptions.
{
tooltip: {
show: false
}
}
Overriding CSS properties of c3 is not a good idea.