From: Evert Timberg Date: Wed, 3 Jun 2015 23:54:34 +0000 (-0400) Subject: Cleaned up global config + documentation of global config options X-Git-Tag: v2.0-alpha~2^2~6 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b9ab70f21b2c3ea28b5a8a768e54c393604cdb5b;p=thirdparty%2FChart.js.git Cleaned up global config + documentation of global config options --- 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", + + // Function - function to call each time an animation step occurs + onProgress: function() {}, - // 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 when animations finish + onComplete: function() {}, + }, - // Boolean - If we should show the scale at all - showScale: true, + // Boolean - if true, resize the charts when the page resizes + responsive: false, - // Boolean - If we want to override with a hard coded scale - scaleOverride: false, + // Boolean - if true, try to maintain the screen aspect ratio + maintainAspectRatio: true, + + // Array - events to bind tooltips to + events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"], + + // Hover settings + hover: { + // Function - called when the user hovers over the items. + // Parameters: array of active elements + onHover: null, - // ** 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, + // 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', + + // Number - duration (in ms) of the tooltip animation. 0 to disable + animationDuration: 400, + }, + + // Function - click handler to bind to chart area + onClick: null, + + // Tooltip configuration + tooltips: { + // Boolean - if true show tooltips + enabled: true, + + // Function - custom tooltip function to use + custom: null, + + // String - color of tooltip background + backgroundColor: "rgba(0,0,0,0.8)", + + // String - fonts to use + fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + + // Number - font size + fontSize: 10, + + // String - font style + fontStyle: "normal", - // String - Colour of the scale line - scaleLineColor: "rgba(0,0,0,.1)", + // String - font color + fontColor: "#fff", + + // String - title fonts + titleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + + // Number - title font size + titleFontSize: 12, + + // String - title font style + titleFontStyle: "bold", - // Number - Pixel width of the scale line - scaleLineWidth: 1, + // String - title font color + titleFontColor: "#fff", - // Boolean - Whether to show labels on the scale - scaleShowLabels: true, + // Number - + yPadding: 6, + + // Number - + xPadding: 6, + + // Number - + caretSize: 8, + + // Number - radius of rounded corners + cornerRadius: 6, + + // Number - + xOffset: 10, + + // String - template string to use for tooltips in single mode + template: [ + '<% if(label){ %>', + '<%=label %>:', + '<% } %>', + '<%=value %>', + ].join(''), + + // String - template string to use for tooltips in label mode + multiTemplate: [ + '<%if (datasetLabel){ %>', + '<%=datasetLabel %>:', + '<% } %>', + '<%=value %>' + ].join(''), - // Interpolated JS string - can access value - scaleLabel: "<%=value%>", + // String - + multiKeyBackground: '#fff', + }, - // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there - scaleIntegersOnly: true, + // String - default grey color. 'rgba(0,0,0,0.1)' + defaultColor: defaultColor, - // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value - scaleBeginAtZero: false, + // Element defaults + elements: { + // Default settings for all line elements + line: { + // Number - Bezier curve tension. Set to 0 for no bezier curves + tension: 0.4, - // String - Scale label font declaration for the scale label - scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", + // String - the fill color + backgroundColor: defaultColor, + + // Number - width of the line + borderWidth: 3, - // Number - Scale label font size in pixels - scaleFontSize: 12, + // 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, - // String - Scale label font weight style - scaleFontStyle: "normal", + // Boolean - + skipNull: true, - // String - Scale label font colour - scaleFontColor: "#666", + // Boolean - + drawNull: false, + }, + // Settings for all point elements + point: { + // Number - radius of point circle + radius: 3, - // Boolean - whether or not the chart should be responsive and resize when the browser does. - responsive: false, + // String - fill color of point + backgroundColor: defaultColor, - // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container - maintainAspectRatio: true, + // Number - width of stroke of point circle + borderWidth: 1, - // Boolean - Determines whether to draw tooltips on the canvas or not - showTooltips: true, + // String - stroke color for point + borderColor: defaultColor, - // 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, - - // Array - Array of string names to attach tooltip events - tooltipEvents: ["mousemove", "touchstart", "touchmove"], - - // String - Tooltip background colour - tooltipFillColor: "rgba(0,0,0,0.8)", - - // String - Tooltip label font declaration for the scale label - tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - - // Number - Tooltip label font size in pixels - tooltipFontSize: 14, - - // String - Tooltip font weight style - tooltipFontStyle: "normal", - - // String - Tooltip label font colour - tooltipFontColor: "#fff", - - // String - Tooltip title font declaration for the scale label - tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", - - // Number - Tooltip title font size in pixels - tooltipTitleFontSize: 14, - - // String - Tooltip title font weight style - tooltipTitleFontStyle: "bold", - - // String - Tooltip title font colour - tooltipTitleFontColor: "#fff", - - // Number - pixel width of padding around tooltip text - tooltipYPadding: 6, - - // Number - pixel width of padding around tooltip text - tooltipXPadding: 6, - - // Number - Size of the caret on the tooltip - tooltipCaretSize: 8, - - // Number - Pixel radius of the tooltip border - tooltipCornerRadius: 6, - - // 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 %>", - - // Function - Will fire on animation progression. - onAnimationProgress: function(){}, - - // Function - Will fire on animation completion. - onAnimationComplete: function(){} + // 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/src/Chart.Core.js b/src/Chart.Core.js index 356e0dbc3..34600aaae 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -113,10 +113,6 @@ fill: true, // do we fill in the area between the line and the x axis skipNull: true, drawNull: false, - - // Hover - hitRadius: 6, - hoverBorderWidth: 2, }, point: { radius: 3,