This boilerplate allows you to develop quickly and easily chart canvas bundles. It has two modes. The result of production mode is a minimized bundle. You can embed this bundle on a website and then automatically update the chart's datasets continuously, for example.
In development mode, the chart files are watched. This means, if you edit them and save your changes, the charts will be recompiled and reloaded immediately. Feel free to adapt the existing charts or create a completely new one. If you need inspiration, check out Chart.js Samples or Awesome Chart.js. There you can see what's possible.
mtw-chart-bubble.mp4 |
mtw-chart-bar.mp4 |
all charts are based on the exceptional work of the Chart.js Contributors [License: MIT; Copyright: © 2014-2022 Chart.js Contributors]
mtw-chart-bubble is based on Bubble Chart and Quadrants [Changes: made]
mtw-chart-polar is based on Polar Area [Changes: made]
mtw-chart-bar is based on Bar Chart Border Radius [Changes: made]
mtw-chart-line is based on v3anims.js [Changes: made]
Note: Badges are clickable and linked to their sources.
Note: Cards are clickable and linked to the corresponding GitHub repositories.
To enable local operation of this boilerplate, you can do the following:
- open your terminal and define your startup file
MYSTARTUPFILE
in use - install nvm and source your startup file again
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash source ~/$MYSTARTUPFILE
- if your terminal has closed, open it again and continue
- execute
to install Node.js
- clone the repository
git clone https://github.com/mythemeway/mtw-boilerplate-charts
or your fork to your local machine - change your current directory to mtw-boilerplate-charts
cd mtw-boilerplate-charts
- run
npm install
Note: If you've already installed
you only have to do steps 5-7.
That's it.
Go to the mtw-boilerplate-charts directory on your local machine and execute npm start
. The result will appear at e. g. http://localhost:8080
.
There are two ways to get your minimized bundle.
Way 1: npm run build
= without terser [default] [faster]
Way 2: npm run terser
= with terser additionally [smaller]
Note: output directory is always
~/mtw-boilerplate-charts/dist
<div style="position:relative; height:40vh; width:80vw">
<canvas id="mtw-canvas"></canvas>
</div>
<script src="./canvas.bundle.min.js"></script>
Note: responsive charts require special embedding treatment
- open
~/mtw-boilerplate-charts/canvas.config.js
- change
const canvas
and save it// // CANVAS SETTINGS // - path: path to canvas // - id: canvas id attribute // // const canvas = { path: './src/chartjs/mtw-chart-line.js', id: 'mtw-canvas' }; // const canvas = { path: './src/chartjs/mtw-chart-bar.js', id: 'mtw-canvas' }; const canvas = { path: './src/chartjs/mtw-chart-polar.js', id: 'mtw-canvas' }; // const canvas = { path: './src/chartjs/mtw-chart-bubble.js', id: 'mtw-canvas' }; module.exports = canvas;
- put
mtw-chart-new.js
into the~/mtw-boilerplate-charts/src/...
directory - follow the switch chart procedure
// // CANVAS SETTINGS // - path: path to canvas // - id: canvas id attribute // // const canvas = { path: './src/chartjs/mtw-chart-line.js', id: 'mtw-canvas' }; // const canvas = { path: './src/chartjs/mtw-chart-bar.js', id: 'mtw-canvas' }; // const canvas = { path: './src/chartjs/mtw-chart-polar.js', id: 'mtw-canvas' }; // const canvas = { path: './src/chartjs/mtw-chart-bubble.js', id: 'mtw-canvas' }; const canvas = { path: './src/chartjs/mtw-chart-new.js', id: 'new-canvas' }; module.exports = canvas;
your canvas id attribute setting is only used in production mode; in development mode it is always the default
mtw-canvas
if you switch/add a chart in development mode, the result is displayed immediately after saving your changes
|
The use of protected brand names, trade names, utility models and brand logos on this website does not constitute an infringement of copyright; rather, it serves as an illustrative note. Even if this is not marked as such at the respective points, the corresponding legal provisions always apply.
The brand names and logos used are the property of their respective owners and are subject to their copyright provisions.
This offer is in no way related to the legal entities of the protected brand names and logos used.
This README contains links to external third-party websites. The README operator has no influence on the content of these sites. Therefore, he cannot assume any liability. Instead, the respective provider is always responsible for the content.
The linked pages were checked for possible legal violations at the time of linking and illegal content wasn't discernible. A permanent control of the linked pages is unreasonable without concrete evidence of an infringement. However, if the README operator becomes aware of such a violation, he will act immediately.
star-solid.svg & code-branch-solid.svg [License: CC BY 4.0; Copyright: © Fonticons, Inc.; Changes: made]
GitHub Readme Stats [License: MIT; Copyright © 2021 Anurag Hazra; Changes: made]
Simple Icons [License: CC0 1.0]
Shields.io [License: CC0 1.0]