<html> <head> <link rel="stylesheet" type="text/css" href="/css/c3.css"> </head> <body> <div id="chart"></div> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="/js/c3.js"></script> <script> var chart = c3.generate({ data: { columns: [ ['sample', 30, 200, 100, 400, 150, 250, 300] ] }, axis: { rotated: true, y2: { // show: true, } }, regions: [ {end:1,class:'region1'}, {start:2,end:4,class:'region1'}, {start:5,class:'region1'}, {end:50,axis:'y'}, {start:100,end:200,axis:'y'}, {start:300,axis:'y'}, ], zoom: { // enabled: true } }); setTimeout(function () { chart.load({ columns: [ ['sample', -100, 200, 50, 100, 400, 299] ] }); }, 1000); setTimeout(function () { chart.regions([]); }, 2000); setTimeout(function () { chart.regions([{start:0.5,end:2.5}]); }, 3000); setTimeout(function () { chart.regions.add([{start:4.5}]); }, 4000); setTimeout(function () { chart.regions.add([{start:3,end:3.5,class:"region1"}, {start:4,end:4.5,class:"region2"}]); }, 5000); setTimeout(function () { chart.regions.remove({classes:['region1', 'region2'], duration: 0}); }, 6000); setTimeout(function () { chart.regions.add([ {start:3,end:3.5,class:"region3 hoge"}, {start:4,end:4.5,class:"region4 hoge"}, {start:0,end:0.5,class:"region5 hogehoge"}, ]); }, 7000); setTimeout(function () { chart.regions.remove({classes:['hoge'], duration: 500}); }, 8000); setTimeout(function () { chart.regions.remove({classes:['hogehoge']}); }, 9000); setTimeout(function () { chart.regions.remove({}); }, 10000); </script> </body> </html>