var chart3 = c3.generate({
bindto : "#chart3",
data : {
x : 'x',
type: 'bar',
types: {
data3: 'line',
},
columns: [
['x', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01', '2021-01-01', '2022-01-01', '2023-01-01', '2024-01-01', '2025-01-01', '2026-01-01', '2027-01-01'],
['data1', 0, 350, 300, 120, 0, 600, 750, 800, 920, 1100, 1300, 1350, 1500, 1620, 2000, 0],
['data2', 0, 100, 140, 200, 0, 230, 300, 340, 400, 550, 630, 700, 840, 1000, 1150, 0],
['data3', 30, 50, 80, 100, 110, 130, 150, 200, 230, 250, 300, 350, 400, 500, 550, 0],
],
groups: [
['data1', 'data2']
],
colors: {
data1: color_data[0],
data2: color_data[1],
data3: color_data[2],
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y'
}
},
y: {
max: 40000,
min: 0,
// Range includes padding, set 0 if no padding needed
// padding: {top:0, bottom:0}
}
},
bar: {
width : {
ratio : 1
},
},
onrendered : function() {
var totalLength1 = d3.selectAll(".c3-chart-lines path").node().getTotalLength()
d3.selectAll(".c3-chart-lines path")
.attr("stroke-dasharray", totalLength1 + " " + totalLength1)
.attr("stroke-dashoffset", totalLength1)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
d3.selectAll(".c3-chart-bars path").each(function() {
console.log(d3.select(this).node())
var totalLength2 = d3.select(this).node().getTotalLength()
d3.select(this)
.attr("stroke-dasharray", 10 + " " + 10)
.attr("stroke-dashoffset", 50)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
})
}
})
hi i have some problem
i am new with c3.js also svg and d3.js too
but norw i need to barchart with animation
i hope it could be grow up each column orderly
is there any chance to do that???
i hope i can get answer!! thanks!
C3 version: 0.4.11 - rc4
D3 version: 3.5.17
Browser: chrome 119.0.6045.105
OS: MAC 12.7
*** here is my code