--- /dev/null
+---
+title: Advanced usage
+anchor: advanced-usage
+---
+
+
+### Prototype methods
+
+For each chart, there are a set of global prototype methods on the shared `ChartType` which you may find useful. These are available on all charts created with Chart.js, but for the examples, let's use a line chart we've made.
+
+```javascript
+// For example:
+var myLineChart = new Chart(ctx).Line(data);
+```
+
+#### .clear()
+
+Will clear the chart canvas. Used extensively internally between animation frames, but you might find it useful.
+
+```javascript
+// Will clear the canvas that myLineChart is drawn on
+myLineChart.clear();
+// => returns 'this' for chainability
+```
+
+#### .stop()
+
+Use this to stop any current animation loop. This will pause the chart during any current animation frame. Call `.render()` to re-animate.
+
+```javascript
+// Stops the charts animation loop at its current frame
+myLineChart.stop();
+// => returns 'this' for chainability
+```
+
+#### .resize()
+
+Use this to manually resize the canvas element. This is run each time the browser is resized, but you can call this method manually if you change the size of the canvas nodes container element.
+
+```javascript
+// Resizes & redraws to fill its container element
+myLineChart.resize();
+// => returns 'this' for chainability
+```
+
+#### .destroy()
+
+Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js.
+
+```javascript
+// Destroys a specific chart instance
+myLineChart.destroy();
+```
+
+#### .toBase64Image()
+
+This returns a base 64 encoded string of the chart in it's current state.
+
+```javascript
+myLineChart.toBase64Image();
+// => returns png data url of the image on the canvas
+```
+
+#### .generateLegend()
+
+Returns an HTML string of a legend for that chart. The template for this legend is at `legendTemplate` in the chart options.
+
+```javascript
+myLineChart.generateLegend();
+// => returns HTML string of a legend for this chart
+```
+
+### External Tooltips
+
+You can enable custom tooltips in the global or chart configuration like so:
+
+```javascript
+var myPieChart = new Chart(ctx).Pie(data, {
+ customTooltips: function(tooltip) {
+
+ // tooltip will be false if tooltip is not visible or should be hidden
+ if (!tooltip) {
+ return;
+ }
+
+ // Otherwise, tooltip will be an object with all tooltip properties like:
+
+ // tooltip.caretHeight
+ // tooltip.caretPadding
+ // tooltip.chart
+ // tooltip.cornerRadius
+ // tooltip.fillColor
+ // tooltip.font...
+ // tooltip.text
+ // tooltip.x
+ // tooltip.y
+ // etc...
+
+ };
+});
+```
+
+See files `sample/pie-customTooltips.html` and `sample/line-customTooltips.html` for examples on how to get started.
+
+
+### Writing new chart types
+
+Chart.js 1.0 has been rewritten to provide a platform for developers to create their own custom chart types, and be able to share and utilise them through the Chart.js API.
+
+The format is relatively simple, there are a set of utility helper methods under `Chart.helpers`, including things such as looping over collections, requesting animation frames, and easing equations.
+
+On top of this, there are also some simple base classes of Chart elements, these all extend from `Chart.Element`, and include things such as points, bars and scales.
+
+```javascript
+Chart.Type.extend({
+ // Passing in a name registers this chart in the Chart namespace
+ name: "Scatter",
+ // Providing a defaults will also register the deafults in the chart namespace
+ defaults : {
+ options: "Here",
+ available: "at this.options"
+ },
+ // Initialize is fired when the chart is initialized - Data is passed in as a parameter
+ // Config is automatically merged by the core of Chart.js, and is available at this.options
+ initialize: function(data){
+ this.chart.ctx // The drawing context for this chart
+ this.chart.canvas // the canvas node for this chart
+ },
+ // Used to draw something on the canvas
+ draw: function() {
+ }
+});
+
+// Now we can create a new instance of our chart, using the Chart.js API
+new Chart(ctx).Scatter(data);
+// initialize is now run
+```
+
+### Extending existing chart types
+
+We can also extend existing chart types, and expose them to the API in the same way. Let's say for example, we might want to run some more code when we initialize every Line chart.
+
+```javascript
+// Notice now we're extending the particular Line chart type, rather than the base class.
+Chart.types.Line.extend({
+ // Passing in a name registers this chart in the Chart namespace in the same way
+ name: "LineAlt",
+ initialize: function(data){
+ console.log('My Line chart extension');
+ Chart.types.Line.prototype.initialize.apply(this, arguments);
+ }
+});
+
+// Creates a line chart in the same way
+new Chart(ctx).LineAlt(data);
+// but this logs 'My Line chart extension' in the console.
+```
+
+### Community extensions
+
+- <a href="https://github.com/Regaddi/Chart.StackedBar.js" target="_blank">Stacked Bar Chart</a> by <a href="https://twitter.com/Regaddi" target="_blank">@Regaddi</a>
+- <a href="https://github.com/tannerlinsley/Chart.StackedArea.js" target="_blank">Stacked Bar Chart</a> by <a href="https://twitter.com/tannerlinsley" target="_blank">@tannerlinsley</a>
+- <a href="https://github.com/CAYdenberg/Chart.js" target="_blank">Error bars (bar and line charts)</a> by <a href="https://twitter.com/CAYdenberg" target="_blank">@CAYdenberg</a>
+- <a href="http://dima117.github.io/Chart.Scatter/" target="_blank">Scatter chart (number & date scales are supported)</a> by <a href="https://github.com/dima117" target="_blank">@dima117</a>
+
+### Creating custom builds
+
+Chart.js uses <a href="http://gulpjs.com/" target="_blank">gulp</a> to build the library into a single JavaScript file. We can use this same build script with custom parameters in order to build a custom version.
+
+Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
+
+```bash
+npm install
+npm install -g gulp
+```
+
+This will install the local development dependencies for Chart.js, along with a CLI for the JavaScript task runner <a href="http://gulpjs.com/" target="_blank">gulp</a>.
+
+Now, we can run the `gulp build` task, and pass in a comma-separated list of types as an argument to build a custom version of Chart.js with only specified chart types.
+
+Here we will create a version of Chart.js with only Line, Radar and Bar charts included:
+
+```bash
+gulp build --types=Line,Radar,Bar
+```
+
+This will output to the `/custom` directory, and write two files, Chart.js, and Chart.min.js with only those chart types included.
projects / soho-sigint.git / blobdiff