<html> <head> <link rel="stylesheet" type="text/css" href="../css/c3.css"> </head> <body> <div id="chart"></div> <script src="https://d3js.org/d3.v5.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', label: 'Region 1', paddingY: 15}, {start: 2, end: 4, class: 'region1', label: 'Region 2', paddingY: 20, paddingX: 10, vertical: true}, {start: 5, class: 'region1', label: 'Region 3', paddingY: 15}, {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",label:"Region 4"}, {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>