Skip to content

This adds the option of having a range slider to your Chart.JS Charts, to allow you to select a specific data scale

License

Notifications You must be signed in to change notification settings

Redirts/Chart.js-RangeSlider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Chart.JS-RangeSlider

A range slider plugin for Chart.JS, that enables you to select a specific data scales.

Demo

JSFiddle: https://jsfiddle.net/schme16/xfyvvup8/195/

Installation:

bower install chart.js-rangeslider --save npm install chart.js-rangeslider --save or straight from the source:

Dependencies

  • jQuery (for now)
  • Chart.js
  • noUISlider

Which one should I use?

  • Include the version that suits you best; the library comes in three flavours:
    • Solo: Only the plugin is included.
    • Minimal: The plugin and the slider library noUISlider is included
    • All: This one is batteries included, as such it come with jQuery, Chart.js noUISlider and the plugin all bundled together.

Usage

new RangeSliderChart({

	chartData: chartJSDatasets, //The same data you give to Chart.js
	chartOpts: chartJSOptions, //Your Chart.js options
	chartType: 'Line', //Which Chart.js chart you want (eg. Lie, Bar, Pie, etc.)
	chartCTX: ctx, //your canvas context

	class: 'my-chart-ranger', //Specifies a custom class you want applied to your sliders

	initial: [3, 10] //Which data points to start the sliders on
})

About

This adds the option of having a range slider to your Chart.JS Charts, to allow you to select a specific data scale

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 58.2%
  • HTML 39.7%
  • CSS 2.1%