]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Cleaned up global config + documentation of global config options
authorEvert Timberg <evert.timberg@gmail.com>
Wed, 3 Jun 2015 23:54:34 +0000 (19:54 -0400)
committerEvert Timberg <evert.timberg@gmail.com>
Wed, 3 Jun 2015 23:54:34 +0000 (19:54 -0400)
docs/00-Getting-Started.md
src/Chart.Core.js

index a6884a4beab35b8826b8f6c1debda119dd644442..3c2b6435fb6781261d7937661bade0e75de8bffd 100644 (file)
@@ -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,
+        },
+    }
 }
 ```
 
index 356e0dbc3e029876381392d8f82d21c15362b53a..34600aaae24f4cc3c11bea02dedaf1090392a96c 100755 (executable)
                     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,