diff --git a/bower.json b/bower.json
index cc8681852..efdffbd19 100644
--- a/bower.json
+++ b/bower.json
@@ -1,15 +1,13 @@
{
- "name": "Chart.js",
- "version": "1.0.2",
- "description": "Simple HTML5 Charts using the canvas element",
- "homepage": "https://github.com/nnnick/Chart.js",
- "author": "nnnick",
- "main": [
- "Chart.js"
- ],
- "devDependencies": {
- "angular": "~1.3.15",
- "jquery": "~2.1.4",
- "flatstrap": "~3.3.1"
- }
+ "name": "Chart.js",
+ "version": "2.0.0-alpha",
+ "description": "Simple HTML5 Charts using the canvas element",
+ "homepage": "https://github.com/nnnick/Chart.js",
+ "author": "nnnick",
+ "main": [
+ "Chart.js"
+ ],
+ "devDependencies": {
+ "jquery": "~2.1.4"
+ }
}
diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md
index a6884a4be..3c2b6435f 100644
--- a/docs/00-Getting-Started.md
+++ b/docs/00-Getting-Started.md
@@ -74,135 +74,207 @@ This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow
```javascript
Chart.defaults.global = {
- // Boolean - Whether to animate the chart
- animation: true,
+ // Animation settings
+ animation: {
+ // Length that animation should take in ms assuming 60fps.
+ // Set to 0 to disable animation
+ duration: 1000,
- // Number - Number of animation steps
- animationSteps: 60,
+ // Easing type. Possible values are:
+ // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
+ // easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
+ // easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
+ // easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
+ // easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
+ // easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
+ // easeOutElastic, easeInCubic]
+ easing: "easeOutQuart",
- // String - Animation easing effect
- // Possible effects are:
- // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
- // easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
- // easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
- // easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
- // easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
- // easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
- // easeOutElastic, easeInCubic]
- animationEasing: "easeOutQuart",
+ // Function - function to call each time an animation step occurs
+ onProgress: function() {},
- // Boolean - If we should show the scale at all
- showScale: true,
+ // Function - function to call when animations finish
+ onComplete: function() {},
+ },
- // Boolean - If we want to override with a hard coded scale
- scaleOverride: false,
+ // Boolean - if true, resize the charts when the page resizes
+ responsive: false,
- // ** Required if scaleOverride is true **
- // Number - The number of steps in a hard coded scale
- scaleSteps: null,
- // Number - The value jump in the hard coded scale
- scaleStepWidth: null,
- // Number - The scale starting value
- scaleStartValue: null,
+ // Boolean - if true, try to maintain the screen aspect ratio
+ maintainAspectRatio: true,
- // String - Colour of the scale line
- scaleLineColor: "rgba(0,0,0,.1)",
+ // Array - events to bind tooltips to
+ events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
- // Number - Pixel width of the scale line
- scaleLineWidth: 1,
+ // Hover settings
+ hover: {
+ // Function - called when the user hovers over the items.
+ // Parameters: array of active elements
+ onHover: null,
- // Boolean - Whether to show labels on the scale
- scaleShowLabels: true,
+ // String - hover mode. Options are 'single', 'label', and 'dataset'
+ // 'single' gets the nearest element
+ // 'label' gets all of the elements at the given dataset index (do not use for scatter charts)
+ // 'dataset' gets all the elements in the given dataset
+ mode: 'single',
- // Interpolated JS string - can access value
- scaleLabel: "<%=value%>",
+ // Number - duration (in ms) of the tooltip animation. 0 to disable
+ animationDuration: 400,
+ },
- // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
- scaleIntegersOnly: true,
+ // Function - click handler to bind to chart area
+ onClick: null,
- // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
- scaleBeginAtZero: false,
+ // Tooltip configuration
+ tooltips: {
+ // Boolean - if true show tooltips
+ enabled: true,
- // String - Scale label font declaration for the scale label
- scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ // Function - custom tooltip function to use
+ custom: null,
- // Number - Scale label font size in pixels
- scaleFontSize: 12,
+ // String - color of tooltip background
+ backgroundColor: "rgba(0,0,0,0.8)",
- // String - Scale label font weight style
- scaleFontStyle: "normal",
+ // String - fonts to use
+ fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
- // String - Scale label font colour
- scaleFontColor: "#666",
+ // Number - font size
+ fontSize: 10,
- // Boolean - whether or not the chart should be responsive and resize when the browser does.
- responsive: false,
+ // String - font style
+ fontStyle: "normal",
- // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
- maintainAspectRatio: true,
+ // String - font color
+ fontColor: "#fff",
- // Boolean - Determines whether to draw tooltips on the canvas or not
- showTooltips: true,
+ // String - title fonts
+ titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
- // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
- customTooltips: false,
+ // Number - title font size
+ titleFontSize: 12,
- // Array - Array of string names to attach tooltip events
- tooltipEvents: ["mousemove", "touchstart", "touchmove"],
+ // String - title font style
+ titleFontStyle: "bold",
- // String - Tooltip background colour
- tooltipFillColor: "rgba(0,0,0,0.8)",
+ // String - title font color
+ titleFontColor: "#fff",
- // String - Tooltip label font declaration for the scale label
- tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ // Number -
+ yPadding: 6,
- // Number - Tooltip label font size in pixels
- tooltipFontSize: 14,
+ // Number -
+ xPadding: 6,
- // String - Tooltip font weight style
- tooltipFontStyle: "normal",
+ // Number -
+ caretSize: 8,
- // String - Tooltip label font colour
- tooltipFontColor: "#fff",
+ // Number - radius of rounded corners
+ cornerRadius: 6,
- // String - Tooltip title font declaration for the scale label
- tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+ // Number -
+ xOffset: 10,
- // Number - Tooltip title font size in pixels
- tooltipTitleFontSize: 14,
+ // String - template string to use for tooltips in single mode
+ template: [
+ '<% if(label){ %>',
+ '<%=label %>:',
+ '<% } %>',
+ '<%=value %>',
+ ].join(''),
- // String - Tooltip title font weight style
- tooltipTitleFontStyle: "bold",
+ // String - template string to use for tooltips in label mode
+ multiTemplate: [
+ '<%if (datasetLabel){ %>',
+ '<%=datasetLabel %>:',
+ '<% } %>',
+ '<%=value %>'
+ ].join(''),
- // String - Tooltip title font colour
- tooltipTitleFontColor: "#fff",
+ // String -
+ multiKeyBackground: '#fff',
+ },
- // Number - pixel width of padding around tooltip text
- tooltipYPadding: 6,
+ // String - default grey color. 'rgba(0,0,0,0.1)'
+ defaultColor: defaultColor,
- // Number - pixel width of padding around tooltip text
- tooltipXPadding: 6,
+ // Element defaults
+ elements: {
+ // Default settings for all line elements
+ line: {
+ // Number - Bezier curve tension. Set to 0 for no bezier curves
+ tension: 0.4,
- // Number - Size of the caret on the tooltip
- tooltipCaretSize: 8,
+ // String - the fill color
+ backgroundColor: defaultColor,
- // Number - Pixel radius of the tooltip border
- tooltipCornerRadius: 6,
+ // Number - width of the line
+ borderWidth: 3,
- // Number - Pixel offset from point x to tooltip edge
- tooltipXOffset: 10,
- {% raw %}
- // String - Template string for single tooltips
- tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
- {% endraw %}
- // String - Template string for multiple tooltips
- multiTooltipTemplate: "<%= value %>",
+ // String = color of the line
+ borderColor: defaultColor,
+
+ // Boolean - if true fill in the area between the line and the x axis with the background color
+ fill: true,
- // Function - Will fire on animation progression.
- onAnimationProgress: function(){},
+ // Boolean -
+ skipNull: true,
- // Function - Will fire on animation completion.
- onAnimationComplete: function(){}
+ // Boolean -
+ drawNull: false,
+ },
+ // Settings for all point elements
+ point: {
+ // Number - radius of point circle
+ radius: 3,
+
+ // String - fill color of point
+ backgroundColor: defaultColor,
+
+ // Number - width of stroke of point circle
+ borderWidth: 1,
+
+ // String - stroke color for point
+ borderColor: defaultColor,
+
+ // Number - extra radius added to radius for hit detection
+ hitRadius: 6,
+
+ // Number - radius of point circle when hovered
+ hoverRadius: 4,
+
+ // Number - radius of circle stroke when hovered
+ hoverBorderWidth: 2,
+ },
+ // Settings for all bar elements
+ bar: {
+ // String - fill color of bar
+ backgroundColor: defaultColor,
+
+ // Number - width of stroke of line surrounding bar fill
+ borderWidth: 0,
+
+ // String - Border color
+ borderColor: defaultColor,
+
+ // Number -
+ valueSpacing: 5,
+
+ // Number -
+ datasetSpacing: 1,
+ },
+ // Settings for all slice elements
+ slice: {
+ // String - fill color
+ backgroundColor: defaultColor,
+
+ // String - border color
+ borderColor: "#fff",
+
+ // Number - border stroke width
+ borderWidth: 2,
+ },
+ }
}
```
diff --git a/docs/01-Line-Chart.md b/docs/01-Line-Chart.md
index 8d164ffb2..986ec3f42 100644
--- a/docs/01-Line-Chart.md
+++ b/docs/01-Line-Chart.md
@@ -13,7 +13,10 @@ Often, it is used to show trend data, and the comparison of two data sets.
###Example usage
```javascript
-var myLineChart = new Chart(ctx).Line(data, options);
+var myLineChart = new Chart(ctx).Line({
+ data: data,
+ options: options
+});
```
###Data structure
@@ -23,22 +26,57 @@ var data = {
datasets: [
{
label: "My First dataset",
- fillColor: "rgba(220,220,220,0.2)",
- strokeColor: "rgba(220,220,220,1)",
- pointColor: "rgba(220,220,220,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(220,220,220,1)",
- data: [65, 59, 80, 81, 56, 55, 40]
+
+ // Boolean - if true fill the area under the line
+ fill: false,
+
+ // String - the color to fill the area under the line with if fill is true
+ backgroundColor: "rgba(220,220,220,0.2)",
+
+ // The properties below allow an array to be specified to change the value of the item at the given index
+
+ // String or array - Line color
+ borderColor: "rgba(220,220,220,1)",
+
+ // String or array - Point stroke color
+ pointBorderColor: "rgba(220,220,220,1)",
+
+ // String or array - Point fill color
+ pointBackgroundColor: "#fff",
+
+ // Number or array - Stroke width of point border
+ pointBorderWidth: 1,
+
+ // Number or array - Radius of point when hovered
+ pointHoverRadius: 5,
+
+ // String or array - point background color when hovered
+ pointHoverBackgroundColor: "rgba(220,220,220,1)",
+
+ // Point border color when hovered
+ pointHoverBorderColor: "rgba(220,220,220,1)",
+
+ // Number or array - border width of point when hovered
+ pointBorderWidth: 2,
+
+ // The actual data
+ data: [65, 59, 80, 81, 56, 55, 40],
+
+ // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
+ yAxisID: "y-axis-1",
},
{
label: "My Second dataset",
- fillColor: "rgba(151,187,205,0.2)",
- strokeColor: "rgba(151,187,205,1)",
- pointColor: "rgba(151,187,205,1)",
- pointStrokeColor: "#fff",
- pointHighlightFill: "#fff",
- pointHighlightStroke: "rgba(151,187,205,1)",
+ fill: false,
+ backgroundColor: "rgba(220,220,220,0.2)",
+ borderColor: "rgba(220,220,220,1)",
+ pointBorderColor: "rgba(220,220,220,1)",
+ pointBackgroundColor: "#fff",
+ pointBorderWidth: 1,
+ pointHoverRadius: 5,
+ pointHoverBackgroundColor: "rgba(220,220,220,1)",
+ pointHoverBorderColor: "rgba(220,220,220,1)",
+ pointBorderWidth: 2,
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@@ -56,65 +94,164 @@ These are the customisation options specific to Line charts. These options are m
```javascript
{
+ // Boolean - if true, line stack on top of each other along the y axis
+ stacked: false,
- ///Boolean - Whether grid lines are shown across the chart
- scaleShowGridLines : true,
+ hover: {
+ // String - We use a label hover mode since the x axis displays data by the index in the dataset
+ mode: "label"
+ },
- //String - Colour of the grid lines
- scaleGridLineColor : "rgba(0,0,0,.05)",
+ scales: {
+ // The line chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes.
+ xAxes: [{
+ // String - type of axis to use. Should not be changed from 'dataset'. To use a 'linear' axis on the x, use the scatter chart type
+ scaleType: "dataset", // scatter should not use a dataset axis
- //Number - Width of the grid lines
- scaleGridLineWidth : 1,
+ // Boolean - if true, show the scale
+ display: true,
- //Boolean - Whether to show horizontal lines (except X axis)
- scaleShowHorizontalLines: true,
+ // String - position of the scale. possible options are "top" and "bottom" for dataset scales
+ position: "bottom",
- //Boolean - Whether to show vertical lines (except Y axis)
- scaleShowVerticalLines: true,
+ // String - id of the axis so that data can bind to it
+ id: "x-axis-1", // need an ID so datasets can reference the scale
- //Boolean - Whether the line is curved between points
- bezierCurve : true,
+ // grid line settings
+ gridLines: {
+ // Boolean - if true, show the grid lines
+ show: true,
- //Number - Tension of the bezier curve between points
- bezierCurveTension : 0.4,
+ // String - color of the grid lines
+ color: "rgba(0, 0, 0, 0.05)",
- //Boolean - Whether to show a dot for each point
- pointDot : true,
+ // Number - width of the grid lines
+ lineWidth: 1,
- //Number - Radius of each point dot in pixels
- pointDotRadius : 4,
+ // Boolean - if true draw lines on the chart area
+ drawOnChartArea: true,
- //Number - Pixel width of point dot stroke
- pointDotStrokeWidth : 1,
+ // Boolean - if true draw ticks in the axis area
+ drawTicks: true,
- //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
- pointHitDetectionRadius : 20,
+ // Number - width of the grid line for the first index (index 0)
+ zeroLineWidth: 1,
- //Boolean - Whether to show a stroke for datasets
- datasetStroke : true,
+ // String - color of the grid line for the first index
+ zeroLineColor: "rgba(0,0,0,0.25)",
- //Number - Pixel width of dataset stroke
- datasetStrokeWidth : 2,
+ // Boolean - if true, offset labels from grid lines
+ offsetGridLines: false,
+ },
- //Boolean - Whether to fill the dataset with a colour
- datasetFill : true,
- {% raw %}
- //String - A legend template
- legendTemplate : "
"
- {% endraw %}
+ // label settings
+ labels: {
+ // Boolean - if true show labels
+ show: true,
- //Boolean - Whether to horizontally center the label and point dot inside the grid
- offsetGridLines : false
+ // String - template string for labels
+ template: "<%=value%>",
+
+ // Number - label font size
+ fontSize: 12,
+
+ // String - label font style
+ fontStyle: "normal",
+
+ // String - label font color
+ fontColor: "#666",
+
+ // String - label font family
+ fontFamily: "Helvetica Neue",
+ },
+ }],
+ yAxes: [{
+ // String - type of axis. 'linear' is the default but extensions may provide other types such as logarithmic
+ scaleType: "linear",
+
+ // Boolean - if true, show the scale
+ display: true,
+
+ // String - position of axis. Vertical axes can have either "left" or "right"
+ position: "left",
+
+ // ID of the axis for data binding
+ id: "y-axis-1",
+
+ // grid line settings
+ gridLines: {
+ // Boolean - if true, show the grid lines
+ show: true,
+
+ // String - color of the grid lines
+ color: "rgba(0, 0, 0, 0.05)",
+
+ // Number - width of the grid lines
+ lineWidth: 1,
+
+ // Boolean - if true draw lines on the chart area
+ drawOnChartArea: true,
+
+ // Boolean - if true draw ticks in the axis area
+ drawTicks: true,
+
+ // Number - width of the grid line representing a numerical value of 0
+ zeroLineWidth: 1,
+
+ // String - color of the grid line representing a numerical value of 0
+ zeroLineColor: "rgba(0,0,0,0.25)",
+ },
+
+ // Boolean - if true ensures that the scale always has a 0 point
+ beginAtZero: false,
+
+ // Object - if specified, allows the user to override the step generation algorithm.
+ // Contains the following values
+ // start: // number to start at
+ // stepWidth: // size of step
+ // steps: // number of steps
+ override: null,
+
+ // label settings
+ labels: {
+ // Boolean - if true show labels
+ show: true,
+
+ // String - template string for labels
+ template: "<%=value%>",
+
+ // Function - if specified this is passed the tick value, index, and the array of all tick values. Returns a string that is used as the label for that value
+ userCallback: null,
+
+ // Number - label font size
+ fontSize: 12,
+
+ // String - label font style
+ fontStyle: "normal",
+
+ // String - label font color
+ fontColor: "#666",
+
+ // String - label font family
+ fontFamily: "Helvetica Neue",
+ },
+ }],
+ }
};
```
-You can override these for your `Chart` instance by passing a second argument into the `Line` method as an object with the keys you want to override.
+You can override these for your `Chart` instance by passing a member `options` into the `Line` method.
-For example, we could have a line chart without bezier curves between points by doing the following:
+For example, we could have a line chart display without an x axis by doing the following. The config merge is smart enough to handle arrays so that you do not need to specify all axis settings to change one thing.
```javascript
-new Chart(ctx).Line(data, {
- bezierCurve: false
+new Chart(ctx).Line({
+ data: data,
+ options: {
+ xAxes: [{
+ show: false
+ }]
+ }
});
// This will create a chart with all of the default options, merged from the global config,
// and the Line chart defaults, but this particular instance will have `bezierCurve` set to false.
diff --git a/docs/02-Bar-Chart.md b/docs/02-Bar-Chart.md
index cc23f38b7..125458861 100644
--- a/docs/02-Bar-Chart.md
+++ b/docs/02-Bar-Chart.md
@@ -14,7 +14,10 @@ It is sometimes used to show trend data, and the comparison of multiple data set
### Example usage
```javascript
-var myBarChart = new Chart(ctx).Bar(data, options);
+var myBarChart = new Chart(ctx).Bar({
+ data: data,
+ options: options
+});
```
### Data structure
@@ -25,18 +28,36 @@ var data = {
datasets: [
{
label: "My First dataset",
- fillColor: "rgba(220,220,220,0.5)",
- strokeColor: "rgba(220,220,220,0.8)",
- highlightFill: "rgba(220,220,220,0.75)",
- highlightStroke: "rgba(220,220,220,1)",
- data: [65, 59, 80, 81, 56, 55, 40]
+
+ // The properties below allow an array to be specified to change the value of the item at the given index
+ // String or array - the bar color
+ backgroundColor: "rgba(220,220,220,0.2)",
+
+ // String or array - bar stroke color
+ borderColor: "rgba(220,220,220,1)",
+
+ // Number or array - bar border width
+ borderWidth: 1,
+
+ // String or array - fill color when hovered
+ hoverBackgroundColor: "rgba(220,220,220,0.2)",
+
+ // String or array - border color when hovered
+ hoverBorderColor: "rgba(220,220,220,1)",
+
+ // The actual data
+ data: [65, 59, 80, 81, 56, 55, 40],
+
+ // String - If specified, binds the dataset to a certain y-axis. If not specified, the first y-axis is used.
+ yAxisID: "y-axis-1",
},
{
label: "My Second dataset",
- fillColor: "rgba(151,187,205,0.5)",
- strokeColor: "rgba(151,187,205,0.8)",
- highlightFill: "rgba(151,187,205,0.75)",
- highlightStroke: "rgba(151,187,205,1)",
+ backgroundColor: "rgba(220,220,220,0.2)",
+ borderColor: "rgba(220,220,220,1)",
+ borderWidth: 1,
+ hoverBackgroundColor: "rgba(220,220,220,0.2)",
+ hoverBorderColor: "rgba(220,220,220,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@@ -53,40 +74,150 @@ These are the customisation options specific to Bar charts. These options are me
```javascript
{
- //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
- scaleBeginAtZero : true,
+ // Boolean - if true, bars stack on top of each other
+ stacked: false,
- //Boolean - Whether grid lines are shown across the chart
- scaleShowGridLines : true,
+ hover: {
+ // String - We use a label hover mode since the x axis displays data by the index in the dataset
+ mode: "label"
+ },
- //String - Colour of the grid lines
- scaleGridLineColor : "rgba(0,0,0,.05)",
+ scales: {
+ // The bar chart officially supports only 1 x-axis but uses an array to keep the API consistent. Use a scatter chart if you need multiple x axes.
+ xAxes: [{
+ // String - type of axis to use. Should not be changed from 'dataset'.
+ scaleType: "dataset", // scatter should not use a dataset axis
- //Number - Width of the grid lines
- scaleGridLineWidth : 1,
+ // Boolean - if true, show the scale
+ display: true,
- //Boolean - Whether to show horizontal lines (except X axis)
- scaleShowHorizontalLines: true,
+ // String - position of the scale. possible options are "top" and "bottom" for dataset scales
+ position: "bottom",
- //Boolean - Whether to show vertical lines (except Y axis)
- scaleShowVerticalLines: true,
+ // String - id of the axis so that data can bind to it
+ id: "x-axis-1", // need an ID so datasets can reference the scale
- //Boolean - If there is a stroke on each bar
- barShowStroke : true,
+ // grid line settings
+ gridLines: {
+ // Boolean - if true, show the grid lines
+ show: true,
- //Number - Pixel width of the bar stroke
- barStrokeWidth : 2,
+ // String - color of the grid lines
+ color: "rgba(0, 0, 0, 0.05)",
- //Number - Spacing between each of the X value sets
- barValueSpacing : 5,
+ // Number - width of the grid lines
+ lineWidth: 1,
- //Number - Spacing between data sets within X values
- barDatasetSpacing : 1,
- {% raw %}
- //String - A legend template
- legendTemplate : "