bar chart animation and transition problem

[KangSeongWoo]

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

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);         })       }     }) Colored by Color Scripter

cs