## Script Tag
```html
-<script src="path/to/chartjs/dist/Chart.js"></script>
+<script src="path/to/chartjs/dist/chart.js"></script>
<script>
var myChart = new Chart(ctx, {...});
</script>
## Require JS
-**Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/Chart.js`, `dist/Chart.min.js`, etc.).
+**Important:** RequireJS [can **not** load CommonJS module as is](https://requirejs.org/docs/commonjs.html#intro), so be sure to require one of the UMD builds instead (i.e. `dist/chart.js`, `dist/chart.min.js`, etc.).
```javascript
-require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
+require(['path/to/chartjs/dist/chart.min.js'], function(Chart){
var myChart = new Chart(ctx, {...});
});
```
### Setup and installation
+* Distributed files are now in lower case. For example: `dist/chart.js`.
* Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. Please see the [installation](installation.md) and [integration](integration.md) docs for details on the recommended way to setup Chart.js if you were using these builds.
* `moment` is no longer specified as an npm dependency. If you are using the time scale, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. You no longer need to exclude moment from your build.
}
function librarySizeTask() {
- return gulp.src('dist/Chart.bundle.min.js')
+ return gulp.src('dist/chart.min.js')
.pipe(size({
gzip: true
}));
"description": "Simple HTML5 charts using the canvas element.",
"version": "3.0.0-alpha",
"license": "MIT",
- "jsdelivr": "dist/Chart.min.js",
- "unpkg": "dist/Chart.min.js",
- "main": "dist/Chart.js",
- "module": "dist/Chart.esm.js",
+ "jsdelivr": "dist/chart.min.js",
+ "unpkg": "dist/chart.min.js",
+ "main": "dist/chart.js",
+ "module": "dist/chart.esm.js",
"keywords": [
"canvas",
"charts",
module.exports = [
// UMD builds
- // dist/Chart.min.js
- // dist/Chart.js
+ // dist/chart.min.js
+ // dist/chart.js
{
input,
plugins: [
],
output: {
name: 'Chart',
- file: 'dist/Chart.js',
+ file: 'dist/chart.js',
banner,
format: 'umd',
indent: false,
],
output: {
name: 'Chart',
- file: 'dist/Chart.min.js',
+ file: 'dist/chart.min.js',
format: 'umd',
indent: false,
},
},
// ES6 builds
- // dist/Chart.esm.min.js
- // dist/Chart.esm.js
+ // dist/chart.esm.min.js
+ // dist/chart.esm.js
{
input,
plugins: [
],
output: {
name: 'Chart',
- file: 'dist/Chart.esm.js',
+ file: 'dist/chart.esm.js',
banner,
format: 'esm',
indent: false,
],
output: {
name: 'Chart',
- file: 'dist/Chart.esm.min.js',
+ file: 'dist/chart.esm.min.js',
format: 'esm',
indent: false,
},
<html>
<head>
<title>Linear Gradient</title>
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<html>
<head>
<title> Animation Callbacks </title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<html>
<head>
<title>Radial Gradient</title>
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Stacked Bar Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > datasets | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > radar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../style.css">
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<script src="analyser.js"></script>
</head>
<head>
<title>Bar Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Horizontal Bar Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bar Chart Multi Axis</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stacked Bar Chart with Groups</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stacked Bar Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bar Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Bubble Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style type="text/css">
canvas{
<head>
<title>Combo Bar-Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Doughnut Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart - Cubic interpolation mode</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Styles</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart Multiple Axes</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Different Point Sizes</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Stepped Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Multi Series Pie Chart</title>
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
</head>
<head>
<title>Pie Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<head>
<title>Polar Area Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Radar Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Radar Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart Multi Axis</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<html>
<head>
<title>Legend Callbacks</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
body, html {
<head>
<title>Legend Point Style</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Legend Positions</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Legend Title Positions</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Scatter Chart</title>
- <script src="../../dist/Chart.js"></script>
+ <script src="../../dist/chart.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Chart with xAxis Filtering</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.15.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.0"></script>
<script src="../utils.js"></script>
<head>
<title>Grid Lines Display Settings</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Grid Lines Scriptable Settings</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Grid Lines Style Settings</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Suggested Min/Max Settings</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Min/Max Settings</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas{
<head>
<title>Logarithmic Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Scatter Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Line Chart - Combo Time Scale</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@1.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="../../utils.js"></script>
<style>
<head>
<title>Time Scale Point Data</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>
<head>
<title>Time Scale Point Data</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>
<head>
<title>Line Chart</title>
- <script src="../../../dist/Chart.min.js"></script>
+ <script src="../../../dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
<script src="../../utils.js"></script>
<head>
<title>Toggle Scale Type</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Bar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Bubble | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Line | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Pie | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Polar Area | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scriptable > Radar | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../style.css">
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
</head>
<body>
<head>
<title>Title Positions & Alignment</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Tooltip Border</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Tooltip Hooks</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Line Chart with Custom Tooltips</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Pie Chart with Custom Tooltips</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
<head>
<title>Custom Tooltips using Data Points</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas{
<head>
<title>Tooltip Interaction Modes</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
<head>
<title>Tooltip Interaction Modes</title>
- <script src="../../dist/Chart.min.js"></script>
+ <script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
canvas {
function deploy_versioned_files {
local version=$1
- local in_files='../dist/Chart*.js'
+ local in_files='../dist/chart*.js'
local out_path='./dist'
rm -rf $out_path/$version
mkdir -p $out_path/$version
projects / thirdparty / Chart.js.git / commitdiff
