diff --git a/README.md b/README.md index f97b31c..4f24436 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,58 @@ -
-# docsify-charty - -by Mark Battistella - -[![](https://img.shields.io/badge/%20-@markbattistella-blue?logo=paypal&style=for-the-badge)](https://www.paypal.me/markbattistella/6AUD) [![](https://img.shields.io/badge/%20-buymeacoffee-black?logo=buy-me-a-coffee&style=for-the-badge)](https://www.buymeacoffee.com/markbattistella) - -:sparkles: [![](https://img.shields.io/badge/demo-@markbattistella/docsify--charty-1E5749?style=for-the-badge)](https://markbattistella.github.io/docsify-charty/) :sparkles: +# docsify.js charty
---- +This plugin enhances your Docsify documentation by adding SVG charts to your website. It allows you to add in multiple types of charts, including pie, doughnut, sectional, radar, area, scatter, line, and bar types. By utilising this plugin, you can easily show your data in a beautiful interface. ## Installation ### Update `index.html` file -1. Add the following script and stylesheet to your `index.html` via either CDN or downloading it and using it locally: - - **unpkg.com** - - ```html - - - ``` +Assuming you have a working [docsify](https://docsify.js.org/) framework set up, it is easy to use the plugin. - **jsDelivr.com** +1. Add the following script and stylesheet to your `index.html` via either CDN or downloading it and using it locally: ```html - - - ``` + + + - **locally** + + + - ```html + ``` -1. In docsify setup configure the plugin (see [configuration](#configuration) for setup). These are the global settings and affect all charts: +1. In docsify setup, configure the plugin: - ```js - window.$docsify = { - charty: { - "theme": String, - "mode": String, - "debug": Boolean - } - }; - ``` + ```js + + ``` ## Configuration -### Global settings +There are several options available for the docsify-charty plugin: -> Example: [index.html](https://github.com/markbattistella/docsify-charty/blob/38573bff480009d5bbe7cdbbab12fe0474fa7407/index.html#L37-L40) +> Example: [index.html](https://github.com/markbattistella/docsify-charty/blob/b792e7701e740587f48598c7b61bc7f7ea39c366/docs/index.html#L36-L40) | Name | Type | Example | Description | |---------|-----------|-----------|-------------------------------------------| @@ -109,63 +97,62 @@ npm i @markbattistella/docsify-charty } ] } -// close the code block -// can't show it here +\`\`\` ``` ## Types of charts ### Circular -#### pie +#### Pie chart ![docsify-charty: pie](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/pie.jpg) -#### donut / doughnut +#### Donut / Doughnut chart ![docsify-charty: donut](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/donut.jpg) -#### section / sectional +#### Section / Sectional chart ![docsify-charty: section](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/section.jpg) -#### rings +#### Rings chart ![docsify-charty: rings](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/rings.jpg) ### Area -#### radar +#### Radar chart ![docsify-charty: radar](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/radar.jpg) -#### area +#### Area chart ![docsify-charty: area](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/area.jpg) ### Plot -#### scatter +#### Scatter chart ![docsify-charty: scatter](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/scatter.jpg) -#### bubble +#### Bubble chart ![docsify-charty: bubble](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/bubble.jpg) -#### line +#### Line chart ![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/line.jpg)
![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/line-stack.jpg) ### Bar / Column -### bar / bar-stack +### Bar / Bar-stack chart ![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/bar.jpg)
![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/bar-stack.jpg) -### column / column-stack +### Column / Column-stack chart ![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/column.jpg)
![docsify-charty: line](https://raw.githubusercontent.com/markbattistella/docsify-charty/main/docs/demo/column-stack.jpg) @@ -176,20 +163,12 @@ npm i @markbattistella/docsify-charty ## Contributing -1. Clone the repo: - - `git clone https://github.com/markbattistella/docsify-charty.git` - -1. Create your feature branch: - - `git checkout -b my-feature` - -1. Commit your changes: +1. Clone the repo: `git clone https://github.com/markbattistella/docsify-charty.git` - `git commit -am 'Add some feature'` +1. Create your feature branch: `git checkout -b my-feature` -1. `Push` to the branch: +1. Commit your changes: `git commit -am 'Add some feature'` - `git push origin my-new-feature` +1. `Push` to the branch: `git push origin my-new-feature` 1. Submit the `pull` request