diff --git a/data/samples.yml b/data/samples.yml
index b44eae0..52babf5 100644
--- a/data/samples.yml
+++ b/data/samples.yml
@@ -214,6 +214,10 @@ interaction_zoom:
title: Zoom
desc: Zoom by mouse wheel event and slide by drag.
+interaction_zoom_by_drag:
+ title: Zoom by Drag
+ desc: Zoom by dragging area.
+
region:
title: Region
desc: Show rects on chart.
diff --git a/docs/js/samples/interaction_zoom_by_drag.js b/docs/js/samples/interaction_zoom_by_drag.js
new file mode 100644
index 0000000..0298ac1
--- /dev/null
+++ b/docs/js/samples/interaction_zoom_by_drag.js
@@ -0,0 +1,11 @@
+var chart = c3.generate({
+ data: {
+ columns: [
+ ['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
+ ]
+ },
+ zoom: {
+ enabled: true,
+ type: 'drag',
+ }
+});
diff --git a/docs/reference.html.haml b/docs/reference.html.haml
index 356aaf5..1163757 100644
--- a/docs/reference.html.haml
+++ b/docs/reference.html.haml
@@ -161,12 +161,13 @@
%li Zoom
= partial :reference_menu_item, locals: { id: 'zoom.enabled', experimental: true }
+ = partial :reference_menu_item, locals: { id: 'zoom.type', experimental: true }
= partial :reference_menu_item, locals: { id: 'zoom.rescale', experimental: true }
= partial :reference_menu_item, locals: { id: 'zoom.extent', experimental: true }
= partial :reference_menu_item, locals: { id: 'zoom.onzoom', experimental: true }
= partial :reference_menu_item, locals: { id: 'zoom.onzoomstart', experimental: true }
= partial :reference_menu_item, locals: { id: 'zoom.onzoomend', experimental: true }
- -#= partial :reference_menu_item, locals: { id: 'zoom.privileged', experimental: true }
+ = partial :reference_menu_item, locals: { id: 'zoom.disableDefaultBehavior', experimental: true }
%li Point
= partial :reference_menu_item, locals: { id: 'point.show' }
@@ -2920,6 +2921,25 @@
%a( href="/samples/interaction_zoom.html" ) Zoom
%hr
+ %section
+ %h3
+ = partial :reference_item_link, locals: { id: 'zoom.type', experimental: true }
+ %p There are two types of zoom behavior: 'scroll' and 'drag'
+ %h5 Default:
+ 'scroll'
+ %h5 Format:
+ %div.sourcecode
+ %pre
+ %code.html.javascript
+ zoom: {
+ type: 'drag'
+ }
+ %h5 Example:
+ %ul
+ %li
+ %a( href="/samples/interaction_zoom_by_drag.html" ) Zoom by Drag
+ %hr
+
%section
%h3
= partial :reference_item_link, locals: { id: 'zoom.rescale', experimental: true }
@@ -3003,6 +3023,24 @@
}
%hr
+ %section
+ %h3
+ = partial :reference_item_link, locals: { id: 'zoom.disableDefaultBehavior', experimental: true }
+ %p Disable the default animation of zoom. This option is useful when you want to get the zoomed domain by onzoom or onzoomend handlers and override the default animation behavior. See #2439 for details.
+
+ %h5 Default:
+ false
+ %h5 Format:
+ %div.sourcecode
+ %pre
+ %code.html.javascript
+ zoom: {
+ enabled: true,
+ disableDefaultBehavior: true,
+ onzoomend: d => console.log(d)
+ }
+ %hr
+
%section
%h3
= partial :reference_item_link, locals: { id: 'point.show' }
diff --git a/docs/samples/interaction_zoom_by_drag.html.haml b/docs/samples/interaction_zoom_by_drag.html.haml
new file mode 100644
index 0000000..310ddc7
--- /dev/null
+++ b/docs/samples/interaction_zoom_by_drag.html.haml
@@ -0,0 +1 @@
+= partial :sample, locals: { id: 'interaction_zoom_by_drag' }