Is it possible to create an Area range chart in C3.js similar to that of Highcharts? I've attached a screenshot and link to the live sample http://www.highcharts.com/demo/arearange-line.
The idea is to show range data, perhaps the historical high and low values, and then overlay the current year's values with a line chart. Can C3 do this?
Thanks in advance!
I don't think there is an area range graph option, but you might be able to fake it like so:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 290, 225, 220],
['data2', 250, 320, 280, 250, 170, 180],
['data3', 230, 300, 240, 200, 150, 150]
],
types: {
data1: 'area',
data2: 'line',
data3: 'area'
},
colors: {
data1: 'rgb(215, 232, 248)',
data2: 'rgb(120, 178, 235)',
data3: '#ffffff'
}
},
point: {
r: 1
}
});
With css:
.c3-area {
opacity:1;
}
Here's a fiddle:
http://jsfiddle.net/ot19Lyt8/17/
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 made a bar graph with c3.js and I need to add non consecutive days to the graph
The problem is that the graph adds empty days
http://c3js.org/samples/timeseries.html
I used this code, it is possible to copy and paste code in page and see live result
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
You can use a category axis instead of a timeseries axis. Check the example:
var chart = c3.generate({
data: {
x: 'x',
type: 'bar',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
],
},
axis: {
x: {
type: 'category',
tick: {
centered: true
}
}
}});
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
I'm trying to create a grouped and stacked bar chart but having a little trouble understanding how to do this with c3js. This tutorial is great and shows me a nicely grouped chart.
http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/
I'm looking for something similar but to have those stacked 2 data sets per bar. My data looks like:
columns: [
['x', 'data1', 'data2'],
['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
]
I would like the chart to have groups of Jan, Feb, Mar. Then have 3 stacked bars labeled within each group. Any ideas if this is possible and how might it be possible, if at all.
Thanks!
Are you wanting something like this? -->
http://jsfiddle.net/3r39gknt/1/
If so, the data1 and data2 fields will need renamed per the example. If not, draw/scan a picture/sketch of what you'd expect - groups in c3 are the data elements involved in each stack, but I've interpreted rightly or wrongly your use of month 'groups' as being different points on the x-axis.
var chart = c3.generate({
data: {
columns: [ // randomish data
['data1', 30, 200, 200],
['data2', 130, 100, 100],
['data3', 230, 220, 200],
['data4', 230, 220, 200],
['data5', 230, 200, 210],
['data6', 230, 190, 200]
],
type: 'bar',
groups: [
['data1', 'data2'],
['data3', 'data4'],
['data5', 'data6'],
],
order: null,
colors: {
data1: '#f00',
data2: '#00f',
data3: '#f33',
data4: '#33f',
data5: '#f66',
data6: '#66f'
}
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
axis: {
x: {
type: 'category',
categories: ['january', 'february', 'march']
}
}
});
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.