zoomable-chart

Zoomable Chart is a combination of "C3" reusable chart library and "noUiSlider" that enables Zoom functionality for X axis as well as Y axis of Line charts and Bar charts into web applications.

A zoom and pan plugin for C3 chart >= 0.4.11

Panning and zooming can be done via slider. moUiSlider is used for slider.

Libraries used:

https://github.com/jquery/jquery
https://github.com/twbs/bootstrap
https://github.com/c3js/c3
https://github.com/leongersen/noUiSlider

Live Demo https://codepen.io/maheshdama13/pen/KWqXjb

How it works

	zoomableChart(C3 Chart Variable, Options);

Example

    //initialise c3 chart
    var chart = c3.generate({
        bindto: '#chart1',
        data: {
            xs: {
                'data1': 'x1',
                'data2': 'x2',
            },
            columns: [
                ['x1', 10, 30, 45, 50, 70, 100],
                ['x2', 30, 50, 75, 100, 120],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 20, 180, 240, 100, 190]
            ]
        }
    });
    
    //initialise zoomableChart pass c3 charts variable to it with options
    zoomableChart(chart, {
        yMin:100,
        xSlider: true,
        ySlider: true,
        xStep:5,
        xTooltipFormat: 'int'

    });
});

Options:

Sliders

To display X axis slider:

xSlider: true | false (default: true)

To display Y axis slider:

ySlider: true | false (default: true)

Tooltips

X axis tooltip

xTooltip: true | false (default: true)

Y axis tooltip

yTooltip: true | false (default: true)

X axis tooltip Format

xTooltipFormat: 'int' | 'float' (default: 'int')

Y axis tooltip Format

yTooltipFormat: 'int' | 'float' (default: 'int')

Range

X axis range (if not given than it will take automatically)

xRange: {
	min: 0 to n,
	max: 0 to n
}

Y axis range (if not given than it will take automatically)

yRange: {
	min: 0 to n,
	max: 0 to n
}

Selected Range (Define zoom range while page load)

X axis selected range (if not given than it will take automatically)

xSelected: {
	min: 0 to n,
	max: 0 to n,
}

Y axis selected range (if not given than it will take automatically)

ySelected: {
	min: 0 to n,
	max: 0 to n,
}

Define step of sliders:

X axis Step:

xStep: 1 to n (default:1)

Y axis Step:

yStep: 1 to n (default:1)