chart.js - npm Package Compare versions
Comparing version 1.1.1 to 2.0.0
| { | ||
| "name": "Chart.js", | ||
| "version": "2.0.0", | ||
| "description": "Simple HTML5 Charts using the canvas element", | ||
@@ -9,14 +10,5 @@ "homepage": "https://github.com/nnnick/Chart.js", | ||
| ], | ||
| "ignore": [ | ||
| "**/*", | ||
| ".travis.yml", | ||
| "CONTRIBUTING.md", | ||
| "Chart.js", | ||
| "LICENSE.md", | ||
| "README.md", | ||
| "gulpfile.js", | ||
| "package.json" | ||
| ], | ||
| "dependencies": {}, | ||
| "version": "1.1.1" | ||
| "devDependencies": { | ||
| "jquery": "~2.1.4" | ||
| } | ||
| } |
@@ -33,2 +33,8 @@ Contributing to Chart.js | ||
| Local development | ||
| ----------------- | ||
| Run `npm install` to install all the libraries, then run `gulp dev --test` to build and run tests as you make changes. | ||
| Pull requests | ||
@@ -39,4 +45,2 @@ ------------- | ||
| Be advised that **Chart.js 1.0.2 is in feature-complete status**. Pull requests adding new features to the 1.x branch will be disregarded. | ||
| Guidlines: | ||
@@ -52,3 +56,3 @@ | ||
| Joining the project | ||
| Joining the Project | ||
| ------------- | ||
@@ -55,0 +59,0 @@ - Active committers and contributors are invited to introduce yourself and request commit access to this project. Please send an email to hello@nickdownie.com or file an issue. |
@@ -6,44 +6,52 @@ --- | ||
| ###Include Chart.js | ||
| ### Download Chart.js | ||
| First we need to include the Chart.js library on the page. The library occupies a global variable of `Chart`. | ||
| To download a zip, go to [Chart.js on Github](https://github.com/nnnick/Chart.js) and choose the version that is right for your application. | ||
| * [Standard build](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.js) (~31kB gzipped) | ||
| * [Bundled with Moment.js](https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/dist/Chart.bundle.js) (~45kB gzipped) | ||
| * [CDN Versions](https://cdnjs.com/libraries/Chart.js) | ||
| To install via npm / bower: | ||
| ```bash | ||
| npm install chart.js --save | ||
| ``` | ||
| ```bash | ||
| bower install Chart.js --save | ||
| ``` | ||
| ### Installation | ||
| To import Chart.js using an old-school script tag: | ||
| ```html | ||
| <script src="Chart.js"></script> | ||
| <script> | ||
| var myChart = new Chart({...}) | ||
| </script> | ||
| ``` | ||
| Alternatively, if you're using an AMD loader for JavaScript modules, that is also supported in the Chart.js core. Please note: the library will still occupy a global variable of `Chart`, even if it detects `define` and `define.amd`. If this is a problem, you can call `noConflict` to restore the global Chart variable to its previous owner. | ||
| To import Chart.js using an awesome module loader: | ||
| ```javascript | ||
| // Using requirejs | ||
| require(['path/to/Chartjs'], function(Chart){ | ||
| // Use Chart.js as normal here. | ||
| // Chart.noConflict restores the Chart global variable to its previous owner | ||
| // The function returns what was previously Chart, allowing you to reassign. | ||
| var Chartjs = Chart.noConflict(); | ||
| // Using CommonJS | ||
| var Chart = require('src/chart.js') | ||
| var myChart = new Chart({...}) | ||
| }); | ||
| ``` | ||
| // ES6 | ||
| import Chart from 'src/chart.js' | ||
| let myChart = new Chart({...}) | ||
| You can also grab Chart.js using bower: | ||
| // Using requirejs | ||
| require(['path/to/Chartjs'], function(Chart){ | ||
| var myChart = new Chart({...}) | ||
| }) | ||
| ```bash | ||
| bower install Chart.js --save | ||
| ``` | ||
| or NPM: | ||
| ### Creating a Chart | ||
| ```bash | ||
| npm install chart.js --save | ||
| ``` | ||
| To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example. | ||
| Also, Chart.js is available from CDN: | ||
| https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js | ||
| ###Creating a chart | ||
| To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the 2d context of where we want to draw the chart. Here's an example. | ||
| ```html | ||
@@ -54,171 +62,183 @@ <canvas id="myChart" width="400" height="400"></canvas> | ||
| ```javascript | ||
| // Get the context of the canvas element we want to select | ||
| // Any of the following formats may be used | ||
| var ctx = document.getElementById("myChart"); | ||
| var ctx = document.getElementById("myChart").getContext("2d"); | ||
| var myNewChart = new Chart(ctx).PolarArea(data); | ||
| var ctx = $("#myChart"); | ||
| ``` | ||
| We can also get the context of our canvas with jQuery. To do this, we need to get the DOM node out of the jQuery collection, and call the `getContext("2d")` method on that. | ||
| Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own! | ||
| ```javascript | ||
| // Get context with jQuery - using jQuery's .get() method. | ||
| var ctx = $("#myChart").get(0).getContext("2d"); | ||
| // This will get the first returned node in the jQuery collection. | ||
| var myNewChart = new Chart(ctx); | ||
| ``` | ||
| The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0. | ||
| After we've instantiated the Chart class on the canvas we want to draw on, Chart.js will handle the scaling for retina displays. | ||
| With the Chart class set up, we can go on to create one of the charts Chart.js has available. In the example below, we would be drawing a Polar area chart. | ||
| ```javascript | ||
| new Chart(ctx).PolarArea(data, options); | ||
| ```html | ||
| <canvas id="myChart" width="400" height="400"></canvas> | ||
| <script> | ||
| var ctx = document.getElementById("myChart"); | ||
| var myChart = new Chart(ctx, { | ||
| type: 'bar', | ||
| data: { | ||
| labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], | ||
| datasets: [{ | ||
| label: '# of Votes', | ||
| data: [12, 19, 3, 5, 2, 3] | ||
| }] | ||
| }, | ||
| options: { | ||
| scales: { | ||
| yAxes: [{ | ||
| ticks: { | ||
| beginAtZero:true | ||
| } | ||
| }] | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
| We call a method of the name of the chart we want to create. We pass in the data for that chart type, and the options for that chart as parameters. Chart.js will merge the global defaults with chart type specific defaults, then merge any options passed in as a second argument after data. | ||
| It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more. | ||
| ###Global chart configuration | ||
| ### Global chart configuration | ||
| This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. | ||
| Templates are based on micro templating by John Resig: | ||
| Chart.js merges configurations and options in a few places with the global defaults using chart type defaults and scales defaults. This way you can be as specific as you want in your individual chart configs, or change the defaults for Chart.js as a whole. | ||
| http://ejohn.org/blog/javascript-micro-templating/ | ||
| The global options are defined in `Chart.defaults.global`. | ||
| ```javascript | ||
| Chart.defaults.global = { | ||
| // Boolean - Whether to animate the chart | ||
| animation: true, | ||
| Name | Type | Default | Description | ||
| --- | --- | --- | --- | ||
| responsive | Boolean | true | Resizes when the canvas container does. | ||
| responsiveAnimationDuration | Number | 0 | Duration in milliseconds it takes to animate to new size after a resize event. | ||
| maintainAspectRatio | Boolean | true | Maintain the original canvas aspect ratio `(width / height)` when resizing | ||
| events | Array[String] | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | Events that the chart should listen to for tooltips and hovering | ||
| hover |-|-|- | ||
| *hover*.onHover | Function | null | Called when any of the events fire. Called in the context of the chart and passed an array of active elements (bars, points, etc) | ||
| *hover*.mode | String | 'single' | Sets which elements hover. Acceptable options are `'single'`, `'label'`, or `'dataset'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value. `dataset` highlights the closest dataset. | ||
| *hover*.animationDuration | Number | 400 | Duration in milliseconds it takes to animate hover style changes | ||
| onClick | Function | null | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed an array of active elements | ||
| defaultColor | Color | 'rgba(0,0,0,0.1)' | | ||
| defaultFontColor | Color | '#666' | Default font color for all text | ||
| defaultFontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Default font family for all text | ||
| defaultFontSize | Number | 12 | Default font size (in px) for text. Does not apply to radialLinear scale point labels | ||
| defaultFontStyle | String | 'normal' | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title | ||
| legendCallback | Function | ` function (chart) { }` | Function to generate a legend. Receives the chart object to generate a legend from. Default implementation returns an HTML string. | ||
| // Number - Number of animation steps | ||
| animationSteps: 60, | ||
| The global options for the chart title is defined in `Chart.defaults.global.title` | ||
| // 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", | ||
| Name | Type | Default | Description | ||
| --- | --- | --- | --- | ||
| display | Boolean | true | Show the title block | ||
| position | String | 'top' | Position of the title. 'top' or 'bottom' are allowed | ||
| fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes) | ||
| fontColor | Color | '#666' | Text color | ||
| fontFamily | String | 'Helvetica Neue' | | ||
| fontSize | Number | 12 | | ||
| fontStyle | String | 'bold' | | ||
| padding | Number | 10 | Number of pixels to add above and below the title text | ||
| text | String | '' | Title text | ||
| // Boolean - If we should show the scale at all | ||
| showScale: true, | ||
| The global options for the chart legend is defined in `Chart.defaults.global.legend` | ||
| // Boolean - If we want to override with a hard coded scale | ||
| scaleOverride: false, | ||
| Name | Type | Default | Description | ||
| --- | --- | --- | --- | ||
| display | Boolean | true | Is the legend displayed | ||
| position | String | 'top' | Position of the legend. Options are 'top' or 'bottom' | ||
| fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes) | ||
| onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item | ||
| labels |-|-|- | ||
| *labels*boxWidth | Number | 40 | Width of coloured box | ||
| *labels*fontSize | Number | 12 | Font size | ||
| *labels*fontStyle | String | "normal" | | ||
| *labels*fontColor | Color | "#666" | | ||
| *labels*fontFamily | String | "Helvetica Neue" | | ||
| *labels*padding | Number | 10 | Padding between rows of colored boxes | ||
| *labels*generateLabels: | Function | `function(data) { }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case. | ||
| // ** 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, | ||
| The global options for tooltips are defined in `Chart.defaults.global.tooltips`. | ||
| // String - Colour of the scale line | ||
| scaleLineColor: "rgba(0,0,0,.1)", | ||
| Name | Type | Default | Description | ||
| --- |:---:| --- | --- | ||
| enabled | Boolean | true | | ||
| custom | | null | | ||
| mode | String | 'single' | Sets which elements appear in the tooltip. Acceptable options are `'single'` or `'label'`. `single` highlights the closest element. `label` highlights elements in all datasets at the same `X` value. | ||
| backgroundColor | Color | 'rgba(0,0,0,0.8)' | Background color of the tooltip | ||
| | | | | ||
| Label | | | There are three labels you can control. `title`, `body`, `footer` the star (\*) represents one of these three. *(i.e. titleFontFamily, footerSpacing)* | ||
| \*FontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | | ||
| \*FontSize | Number | 12 | | ||
| \*FontStyle | String | title - "bold", body - "normal", footer - "bold" | | ||
| \*Spacing | Number | 2 | | ||
| \*Color | Color | "#fff" | | ||
| \*Align | String | "left" | text alignment. See [MDN Canvas Documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textAlign) | ||
| titleMarginBottom | Number | 6 | Margin to add on bottom of title section | ||
| footerMarginTop | Number | 6 | Margin to add before drawing the footer | ||
| xPadding | Number | 6 | Padding to add on left and right of tooltip | ||
| yPadding | Number | 6 | Padding to add on top and bottom of tooltip | ||
| caretSize | Number | 5 | Size, in px, of the tooltip arrow | ||
| cornerRadius | Number | 6 | Radius of tooltip corner curves | ||
| multiKeyBackground | Color | "#fff" | Color to draw behind the colored boxes when multiple items are in the tooltip | ||
| | | | | ||
| callbacks | - | - | V2.0 introduces callback functions as a replacement for the template engine in v1. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object create from the Chart.Tooltip constructor | ||
| **Callback Functions** | | | All functions are called with the same arguments | ||
| xLabel | String or Array[Strings] | | This is the xDataValue for each item to be displayed in the tooltip | ||
| yLabel | String or Array[Strings] | | This is the yDataValue for each item to be displayed in the tooltip | ||
| index | Number | | Data index. | ||
| data | Object | | Data object passed to chart. | ||
| `return`| String or Array[Strings] | | All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text. | ||
| | | | | ||
| *callbacks*.beforeTitle | Function | none | Text to render before the title | ||
| *callbacks*.title | Function | `function(tooltipItems, data) { //Pick first xLabel }` | Text to render as the title | ||
| *callbacks*.afterTitle | Function | none | Text to render after the ttiel | ||
| *callbacks*.beforeBody | Function | none | Text to render before the body section | ||
| *callbacks*.beforeLabel | Function | none | Text to render before an individual label | ||
| *callbacks*.label | Function | `function(tooltipItem, data) { // Returns "datasetLabel: tooltipItem.yLabel" }` | Text to render as label | ||
| *callbacks*.afterLabel | Function | none | Text to render after an individual label | ||
| *callbacks*.afterBody | Function | none | Text to render after the body section | ||
| *callbacks*.beforeFooter | Function | none | Text to render before the footer section | ||
| *callbacks*.footer | Function | none | Text to render as the footer | ||
| *callbacks*.afterFooter | Function | none | Text to render after the footer section | ||
| // Number - Pixel width of the scale line | ||
| scaleLineWidth: 1, | ||
| The global options for animations are defined in `Chart.defaults.global.animation`. | ||
| // Boolean - Whether to show labels on the scale | ||
| scaleShowLabels: true, | ||
| Name | Type | Default | Description | ||
| --- |:---:| --- | --- | ||
| duration | Number | 1000 | The number of milliseconds an animation takes. | ||
| easing | String | "easeOutQuart" | Easing function to use. | ||
| onProgress | Function | none | Callback called on each step of an animation. Passed a single argument, an object, containing the chart instance and an object with details of the animation. | ||
| onComplete | Function | none | Callback called at the end of an animation. Passed the same arguments as `onProgress` | ||
| // Interpolated JS string - can access value | ||
| scaleLabel: "<%=value%>", | ||
| The global options for elements are defined in `Chart.defaults.global.elements`. | ||
| // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there | ||
| scaleIntegersOnly: true, | ||
| Name | Type | Default | Description | ||
| --- |:---:| --- | --- | ||
| arc | - | - | - | ||
| *arc*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default fill color for arcs | ||
| *arc*.borderColor | Color | "#fff" | Default stroke color for arcs | ||
| *arc*.borderWidth | Number | 2 | Default stroke width for arcs | ||
| line | - | - | - | ||
| *line*.tension | Number | 0.4 | Default bezier curve tension. Set to `0` for no bezier curves. | ||
| *line*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default line fill color | ||
| *line*.borderWidth | Number | 3 | Default line stroke width | ||
| *line*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default line stroke color | ||
| *line*.borderCapStyle | String | 'butt' | Default line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap) | ||
| *line*.borderDash | Array | `[]` | Default line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash) | ||
| *line*.borderDashOffset | Number | 0.0 | Default line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset) | ||
| *line*.borderJoinStyle | String | 'miter' | Default line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin) | ||
| *line*.fill | Boolean | true | | ||
| point | - | - | - | ||
| *point*.radius | Number | 3 | Default point radius | ||
| *point*.pointStyle | String | 'circle' | Default point style | ||
| *point*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default point fill color | ||
| *point*.borderWidth | Number | 1 | Default point stroke width | ||
| *point*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default point stroke color | ||
| *point*.hitRadius | Number | 1 | Extra radius added to point radius for hit detection | ||
| *point*.hoverRadius | Number | 4 | Default point radius when hovered | ||
| *point*.hoverBorderWidth | Number | 1 | Default stroke width when hovered | ||
| rectangle | - | - | - | ||
| *rectangle*.backgroundColor | Color | `Chart.defaults.global.defaultColor` | Default bar fill color | ||
| *rectangle*.borderWidth | Number | 0 | Default bar stroke width | ||
| *rectangle*.borderColor | Color | `Chart.defaults.global.defaultColor` | Default bar stroke color | ||
| *rectangle*.borderSkipped | String | 'bottom' | Default skipped (excluded) border for rectangle. Can be one of `bottom`, `left`, `top`, `right` | ||
| // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value | ||
| scaleBeginAtZero: false, | ||
| // String - Scale label font declaration for the scale label | ||
| scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", | ||
| // Number - Scale label font size in pixels | ||
| scaleFontSize: 12, | ||
| // String - Scale label font weight style | ||
| scaleFontStyle: "normal", | ||
| // String - Scale label font colour | ||
| scaleFontColor: "#666", | ||
| // Boolean - whether or not the chart should be responsive and resize when the browser does. | ||
| responsive: false, | ||
| // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container | ||
| maintainAspectRatio: true, | ||
| // Boolean - Determines whether to draw tooltips on the canvas or not | ||
| showTooltips: true, | ||
| // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-external-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", | ||
| // String - Tooltip title template | ||
| tooltipTitleTemplate: "<%= label%>", | ||
| // 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(){} | ||
| } | ||
| ``` | ||
| If for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed: | ||
@@ -231,20 +251,1 @@ | ||
| Now, every time we create a chart, `options.responsive` will be `true`. | ||
| ###Tooltip Templates | ||
| For the `tooltipTemplate` and `multiTooltipTemplate` configuration options, you may use special template blocks. **Do not use user input in the tooltip template, as it may be executed as raw JavaScript.** | ||
| Anything in between `<%` and `%>` will be executed as JavaScript. As in the example shown above, `<% if (label) { %>` and later `<% } %>`. Using `<%= expr %>` will print the value of the variable named by `expr` into the tooltip. | ||
| The available variables to print into the tooltip depends on the chart type. In general, the following variables are available: | ||
| ```javascript | ||
| { | ||
| value : "value of the data point", | ||
| label : "label for the position the data point is at", | ||
| datasetLabel: "label for the dataset the point is from", | ||
| strokeColor : "stroke color for the dataset", | ||
| fillColor : "fill color for the dataset", | ||
| highlightFill : "highlight fill color for the dataset", | ||
| highlightStroke : "highlight stroke color for the dataset" | ||
| } | ||
| ``` |
290
gulpfile.js
| var gulp = require('gulp'), | ||
| concat = require('gulp-concat'), | ||
| uglify = require('gulp-uglify'), | ||
| util = require('gulp-util'), | ||
| jshint = require('gulp-jshint'), | ||
| size = require('gulp-size'), | ||
| connect = require('gulp-connect'), | ||
| replace = require('gulp-replace'), | ||
| htmlv = require('gulp-html-validator'), | ||
| inquirer = require('inquirer'), | ||
| semver = require('semver'), | ||
| exec = require('child_process').exec, | ||
| fs = require('fs'), | ||
| package = require('./package.json'), | ||
| bower = require('./bower.json'), | ||
| livereload = require('gulp-livereload'); | ||
| concat = require('gulp-concat'), | ||
| uglify = require('gulp-uglify'), | ||
| util = require('gulp-util'), | ||
| jshint = require('gulp-jshint'), | ||
| size = require('gulp-size'), | ||
| connect = require('gulp-connect'), | ||
| replace = require('gulp-replace'), | ||
| htmlv = require('gulp-html-validator'), | ||
| inquirer = require('inquirer'), | ||
| semver = require('semver'), | ||
| exec = require('child_process').exec, | ||
| fs = require('fs'), | ||
| package = require('./package.json'), | ||
| bower = require('./bower.json'), | ||
| karma = require('gulp-karma'), | ||
| browserify = require('browserify'), | ||
| streamify = require('gulp-streamify'), | ||
| source = require('vinyl-source-stream'), | ||
| merge = require('merge-stream'); | ||
| var srcDir = './src/'; | ||
| /* | ||
| * Usage : gulp build --types=Bar,Line,Doughnut | ||
| * Output: - A built Chart.js file with Core and types Bar, Line and Doughnut concatenated together | ||
| * - A minified version of this code, in Chart.min.js | ||
| */ | ||
| var outDir = './dist/'; | ||
| var testDir = './test/'; | ||
| gulp.task('build', function(){ | ||
| var preTestFiles = [ | ||
| './node_modules/moment/min/moment.min.js', | ||
| ]; | ||
| // Default to all of the chart types, with Chart.Core first | ||
| var srcFiles = [FileName('Core')], | ||
| isCustom = !!(util.env.types), | ||
| outputDir = (isCustom) ? 'custom' : '.'; | ||
| if (isCustom){ | ||
| util.env.types.split(',').forEach(function(type){ return srcFiles.push(FileName(type));}); | ||
| } | ||
| else{ | ||
| // Seems gulp-concat remove duplicates - nice! | ||
| // So we can use this to sort out dependency order - aka include Core first! | ||
| srcFiles.push(srcDir+'*'); | ||
| } | ||
| var testFiles = [ | ||
| './test/mockContext.js', | ||
| './test/*.js' | ||
| ]; | ||
| return gulp.src(srcFiles) | ||
| .pipe(concat('Chart.js')) | ||
| .pipe(replace('{{ version }}', package.version)) | ||
| .pipe(gulp.dest(outputDir)) | ||
| .pipe(uglify({preserveComments:'some'})) | ||
| .pipe(concat('Chart.min.js')) | ||
| .pipe(gulp.dest(outputDir)); | ||
| gulp.task('build', buildTask); | ||
| gulp.task('coverage', coverageTask); | ||
| gulp.task('watch', watchTask); | ||
| gulp.task('bump', bumpTask); | ||
| gulp.task('release', ['build'], releaseTask); | ||
| gulp.task('jshint', jshintTask); | ||
| gulp.task('test', ['jshint', 'validHTML', 'unittest']); | ||
| gulp.task('size', ['library-size', 'module-sizes']); | ||
| gulp.task('server', serverTask); | ||
| gulp.task('validHTML', validHTMLTask); | ||
| gulp.task('unittest', unittestTask); | ||
| gulp.task('unittestWatch', unittestWatchTask); | ||
| gulp.task('library-size', librarySizeTask); | ||
| gulp.task('module-sizes', moduleSizesTask); | ||
| gulp.task('_open', _openTask); | ||
| gulp.task('dev', ['server', 'default']); | ||
| function FileName(moduleName){ | ||
| return srcDir+'Chart.'+moduleName+'.js'; | ||
| } | ||
| }); | ||
| gulp.task('default', ['build', 'watch']); | ||
| function buildTask() { | ||
| var bundled = browserify('./src/Chart.js') | ||
| .bundle() | ||
| .pipe(source('Chart.bundle.js')) | ||
| .pipe(streamify(replace('{{ version }}', package.version))) | ||
| .pipe(gulp.dest(outDir)) | ||
| .pipe(streamify(uglify({ | ||
| preserveComments: 'some' | ||
| }))) | ||
| .pipe(streamify(concat('Chart.bundle.min.js'))) | ||
| .pipe(gulp.dest(outDir)); | ||
| var nonBundled = browserify('./src/Chart.js') | ||
| .ignore('moment') | ||
| .bundle() | ||
| .pipe(source('Chart.js')) | ||
| .pipe(streamify(replace('{{ version }}', package.version))) | ||
| .pipe(gulp.dest(outDir)) | ||
| .pipe(streamify(uglify({ | ||
| preserveComments: 'some' | ||
| }))) | ||
| .pipe(streamify(concat('Chart.min.js'))) | ||
| .pipe(gulp.dest(outDir)); | ||
| return merge(bundled, nonBundled); | ||
| } | ||
| /* | ||
| * Usage : gulp bump | ||
| * Prompts: Version increment to bump | ||
| * Output: - New version number written into package.json & bower.json | ||
| * Usage : gulp bump | ||
| * Prompts: Version increment to bump | ||
| * Output: - New version number written into package.json & bower.json | ||
| */ | ||
| function bumpTask(complete) { | ||
| util.log('Current version:', util.colors.cyan(package.version)); | ||
| var choices = ['major', 'premajor', 'minor', 'preminor', 'patch', 'prepatch', 'prerelease'].map(function(versionType) { | ||
| return versionType + ' (v' + semver.inc(package.version, versionType) + ')'; | ||
| }); | ||
| inquirer.prompt({ | ||
| type: 'list', | ||
| name: 'version', | ||
| message: 'What version update would you like?', | ||
| choices: choices | ||
| }, function(res) { | ||
| var increment = res.version.split(' ')[0], | ||
| newVersion = semver.inc(package.version, increment); | ||
| gulp.task('bump', function(complete){ | ||
| util.log('Current version:', util.colors.cyan(package.version)); | ||
| var choices = ['major', 'premajor', 'minor', 'preminor', 'patch', 'prepatch', 'prerelease'].map(function(versionType){ | ||
| return versionType + ' (v' + semver.inc(package.version, versionType) + ')'; | ||
| }); | ||
| inquirer.prompt({ | ||
| type: 'list', | ||
| name: 'version', | ||
| message: 'What version update would you like?', | ||
| choices: choices | ||
| }, function(res){ | ||
| var increment = res.version.split(' ')[0], | ||
| newVersion = semver.inc(package.version, increment); | ||
| // Set the new versions into the bower/package object | ||
| package.version = newVersion; | ||
| bower.version = newVersion; | ||
| // Set the new versions into the bower/package object | ||
| package.version = newVersion; | ||
| bower.version = newVersion; | ||
| // Write these to their own files, then build the output | ||
| fs.writeFileSync('package.json', JSON.stringify(package, null, 2)); | ||
| fs.writeFileSync('bower.json', JSON.stringify(bower, null, 2)); | ||
| // Write these to their own files, then build the output | ||
| fs.writeFileSync('package.json', JSON.stringify(package, null, 2)); | ||
| fs.writeFileSync('bower.json', JSON.stringify(bower, null, 2)); | ||
| complete(); | ||
| }); | ||
| } | ||
| complete(); | ||
| }); | ||
| }); | ||
| gulp.task('release', ['build'], function(){ | ||
| exec('git tag -a v' + package.version); | ||
| }); | ||
| function releaseTask() { | ||
| exec('git tag -a v' + package.version); | ||
| } | ||
| gulp.task('jshint', function(){ | ||
| return gulp.src(srcDir + '*.js') | ||
| .pipe(jshint()) | ||
| .pipe(jshint.reporter('default')); | ||
| }); | ||
| gulp.task('valid', function(){ | ||
| return gulp.src('samples/*.html') | ||
| function jshintTask() { | ||
| return gulp.src(srcDir + '**/*.js') | ||
| .pipe(jshint('config.jshintrc')) | ||
| .pipe(jshint.reporter('jshint-stylish')) | ||
| .pipe(jshint.reporter('fail')); | ||
| } | ||
| function validHTMLTask() { | ||
| return gulp.src('samples/*.html') | ||
| .pipe(htmlv()); | ||
| }); | ||
| } | ||
| gulp.task('library-size', function(){ | ||
| return gulp.src('Chart.min.js') | ||
| .pipe(size({ | ||
| gzip: true | ||
| })); | ||
| }); | ||
| gulp.task('module-sizes', function(){ | ||
| return gulp.src(srcDir + '*.js') | ||
| .pipe(uglify({preserveComments:'some'})) | ||
| .pipe(size({ | ||
| showFiles: true, | ||
| gzip: true | ||
| })); | ||
| }); | ||
| function unittestTask() { | ||
| var files = ['./src/**/*.js']; | ||
| Array.prototype.unshift.apply(files, preTestFiles); | ||
| Array.prototype.push.apply(files, testFiles); | ||
| gulp.task('watch', function(){ | ||
| gulp.watch('./src/*', ['build']); | ||
| return gulp.src(files) | ||
| .pipe(karma({ | ||
| configFile: 'karma.conf.ci.js', | ||
| action: 'run' | ||
| })); | ||
| } | ||
| livereload.listen(35729); | ||
| function unittestWatchTask() { | ||
| var files = ['./src/**/*.js']; | ||
| Array.prototype.unshift.apply(files, preTestFiles); | ||
| Array.prototype.push.apply(files, testFiles); | ||
| var reloadPage = function (evt) { | ||
| livereload.changed(evt.path); | ||
| }; | ||
| return gulp.src(files) | ||
| .pipe(karma({ | ||
| configFile: 'karma.conf.js', | ||
| action: 'watch' | ||
| })); | ||
| } | ||
| gulp.watch(['Chart.js', 'samples/*'], reloadPage); | ||
| function coverageTask() { | ||
| var files = ['./src/**/*.js']; | ||
| Array.prototype.unshift.apply(files, preTestFiles); | ||
| Array.prototype.push.apply(files, testFiles); | ||
| }); | ||
| return gulp.src(files) | ||
| .pipe(karma({ | ||
| configFile: 'karma.coverage.conf.js', | ||
| action: 'run' | ||
| })); | ||
| } | ||
| gulp.task('test', ['jshint', 'valid']); | ||
| function librarySizeTask() { | ||
| return gulp.src('dist/Chart.bundle.min.js') | ||
| .pipe(size({ | ||
| gzip: true | ||
| })); | ||
| } | ||
| gulp.task('size', ['library-size', 'module-sizes']); | ||
| function moduleSizesTask() { | ||
| return gulp.src(srcDir + '**/*.js') | ||
| .pipe(uglify({ | ||
| preserveComments: 'some' | ||
| })) | ||
| .pipe(size({ | ||
| showFiles: true, | ||
| gzip: true | ||
| })); | ||
| } | ||
| gulp.task('default', ['build', 'watch']); | ||
| function watchTask() { | ||
| if (util.env.test) { | ||
| return gulp.watch('./src/**', ['build', 'unittest', 'unittestWatch']); | ||
| } | ||
| return gulp.watch('./src/**', ['build']); | ||
| } | ||
| gulp.task('server', function(){ | ||
| connect.server({ | ||
| port: 8000 | ||
| }); | ||
| }); | ||
| function serverTask() { | ||
| connect.server({ | ||
| port: 8000 | ||
| }); | ||
| } | ||
| // Convenience task for opening the project straight from the command line | ||
| gulp.task('_open', function(){ | ||
| exec('open http://localhost:8000'); | ||
| exec('subl .'); | ||
| }); | ||
| gulp.task('dev', ['server', 'default']); | ||
| function _openTask() { | ||
| exec('open http://localhost:8000'); | ||
| exec('subl .'); | ||
| } |
@@ -1,3 +0,2 @@ | ||
| The MIT License (MIT) | ||
| Copyright (c) 2013-2016 Nick Downie | ||
| Copyright (c) 2013-2015 Nick Downie | ||
@@ -4,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
@@ -5,4 +5,4 @@ { | ||
| "description": "Simple HTML5 charts using the canvas element.", | ||
| "version": "1.1.1", | ||
| "main": "Chart.js", | ||
| "version": "2.0.0", | ||
| "main": "src/chart.js", | ||
| "repository": { | ||
@@ -12,21 +12,42 @@ "type": "git", | ||
| }, | ||
| "license": "MIT", | ||
| "dependences": {}, | ||
| "devDependencies": { | ||
| "browserify": "^13.0.0", | ||
| "browserify-istanbul": "^0.2.1", | ||
| "coveralls": "^2.11.6", | ||
| "gulp": "3.9.x", | ||
| "gulp-concat": "~2.1.x", | ||
| "gulp-connect": "~2.0.5", | ||
| "gulp-html-validator": "^0.0.2", | ||
| "gulp-jshint": "~1.5.1", | ||
| "gulp-karma": "0.0.4", | ||
| "gulp-replace": "^0.4.0", | ||
| "gulp-size": "~0.4.0", | ||
| "gulp-uglify": "~1.5.x", | ||
| "gulp-streamify": "^1.0.2", | ||
| "gulp-uglify": "~0.2.x", | ||
| "gulp-umd": "~0.2.0", | ||
| "gulp-util": "~2.2.x", | ||
| "gulp-html-validator": "^0.0.2", | ||
| "inquirer": "^0.5.1", | ||
| "jasmine": "^2.3.2", | ||
| "jasmine-core": "^2.3.4", | ||
| "jquery": "^2.1.4", | ||
| "jshint-stylish": "~2.1.0", | ||
| "karma": "^0.12.37", | ||
| "karma-browserify": "^5.0.1", | ||
| "karma-chrome-launcher": "^0.2.0", | ||
| "karma-coverage": "^0.5.1", | ||
| "karma-firefox-launcher": "^0.1.6", | ||
| "karma-jasmine": "^0.3.6", | ||
| "karma-jasmine-html-reporter": "^0.1.8", | ||
| "merge-stream": "^1.0.0", | ||
| "semver": "^3.0.1", | ||
| "gulp-livereload": "^3.8.0" | ||
| "vinyl-source-stream": "^1.1.0", | ||
| "watchify": "^3.7.0" | ||
| }, | ||
| "spm": { | ||
| "main": "Chart.js" | ||
| }, | ||
| "dependencies": { | ||
| "chartjs-color": "^1.0.2", | ||
| "moment": "^2.10.6" | ||
| } | ||
| } |
@@ -1,42 +0,23 @@ | ||
| [](http://www.chartjs.org/docs/) | ||
| # Chart.js | ||
| [](https://travis-ci.org/nnnick/Chart.js) [](https://codeclimate.com/github/nnnick/Chart.js) [](https://chartjs-slack-automation.herokuapp.com/) | ||
| [](https://travis-ci.org/nnnick/Chart.js) [](https://codeclimate.com/github/nnnick/Chart.js)[](https://coveralls.io/r/nnnick/Chart.js?branch=v2.0-dev) | ||
| *Simple HTML5 Charts using the canvas element* [chartjs.org](http://www.chartjs.org) | ||
| ## v1.0.2 Stable | ||
| - NPM: `npm install chart.js --save` | ||
| - Bower: `bower install Chart.js --save` | ||
| - CDN: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js | ||
| - Zip: [Download](https://github.com/nnnick/Chart.js/archive/master.zip) | ||
| [Examples](https://github.com/nnnick/Chart.js/tree/master/samples) | [Documentation](http://www.chartjs.org/docs/) | ||
| ## v2.0 Beta | ||
| - Release: [2.0.0-beta](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta) | ||
| - Zip: [Download](https://github.com/nnnick/Chart.js/archive/2.0.0-beta2.zip) | ||
| Current Release: [2.0.0-beta2](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta2) | ||
| Documentation for v2.0 is currently located [here](http://nnnick.github.io/Chart.js/docs-v2/). | ||
| ## v2.0 Bleeding-Edge | ||
| - Branch: [v2.0-dev](https://github.com/nnnick/Chart.js/tree/v2.0-dev) | ||
| - Zip: [Download](https://github.com/nnnick/Chart.js/archive/v2.0-dev.zip) | ||
| The next generation and release of Chart.js (v2.0) has been well under way this year and we are very close to releasing some amazing new features including, but not limited to: | ||
| The next generation and release of Chart.js has been well under way this year and we are very close to releasing some amazing new features including, but not limited to: | ||
| - Rewritten, optimized, and unit-tested | ||
| - New and improved scales (log, time, linear, category, multiple scales) | ||
| - Improved Tooltips and tooltip callbacks for customization | ||
| - Improved responsiveness and resizing | ||
| - Powerful support for adding, removing, changing, and updating data on the fly | ||
| - Animations for everything, including all elements, colors and tooltips | ||
| - Animations on all elements, colors and tooltips | ||
| - Powerful customization when you need it. Automatic and dynamic when you don't. | ||
| - Excellent support for modern frameworks and modular build systems. | ||
| - Even more extensible via new element controllers, core scale classes, combo chart support, and hook systems | ||
| - Bug fixes, stability improvements, etc. | ||
| - Even more extensible via new element controllers, combo chart support, and hook system | ||
| - Bug fixes not addressed in 1.x, and much, much more... | ||
@@ -47,10 +28,13 @@ #####Contributing to 2.0 | ||
| #####Building and Testing | ||
| `gulp build`, `gulp test`, `gulp watch --test` | ||
| `gulp build`, `gulp test` | ||
| #####v1.x Status: Feature Complete | ||
| v1.x is now considered feature complete. PR's for bug fixes are still extremely welcome. Any open PR's for v1.x features will need to be reconsidered, refactored and resubmitted for v2.x (if the feature has not already been implemented). For questions on new features refer to the docs in the v2.0-dev branch | ||
| ## v1.x Status: Feature Complete | ||
| We are now treating v1.x as feature complete. PR's for bug fixes are welcome, but we urge any open PR's for v1.x features to be refactored and resubmitted for v2.x (if the feature has not already been implemented). | ||
| ## Documentation | ||
| ## Bugs, Issues and Contributing | ||
| You can find documentation at [chartjs.org/docs](http://www.chartjs.org/docs/). The markdown files that build the site are available under `/docs`. Please note - in some of the json examples of configuration you might notice some liquid tags - this is just for the generating the site html, please disregard. | ||
| ## Bugs, issues and contributing | ||
| Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](https://github.com/nnnick/Chart.js/blob/master/CONTRIBUTING.md) first. | ||
@@ -62,2 +46,2 @@ | ||
| Chart.js is available under the [MIT license](https://github.com/nnnick/Chart.js/blob/master/LICENSE.md). | ||
| Chart.js is available under the [MIT license](http://opensource.org/licenses/MIT). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by389.43%
1840248
- Number of package files
- increased by202.7%
112
- Lines of code
- increased by473.36%
38249
Worsened metrics
- Dependency count
- increased byInfinity%
2
- Dev dependency count
- increased by158.33%
31
- Number of low quality alerts
- increased byInfinity%
2
- Number of lines in readme file
- decreased by-25.81%
46
- Number of low supply chain risk alerts
- increased by900%
10
- Number of medium supply chain risk alerts
- increased by50%
3
Dependency changes
+ Addedchartjs-color@^1.0.2
+ Addedmoment@^2.10.6
+ Addedchartjs-color@1.0.22(transitive)
+ Addedchartjs-color-string@0.4.0(transitive)
+ Addedcolor-convert@0.5.3(transitive)
+ Addedcolor-name@1.1.4(transitive)
+ Addedmoment@2.30.1(transitive)