You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 2.0 KiB

7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
7 jaren geleden
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <div align="center">
  2. <img src="https://github.com/frappe/design/blob/master/logos/frappe-charts-symbol.svg" height="128">
  3. <h2>Frappé Charts</h2>
  4. <p align="center">
  5. <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
  6. <a href="https://frappe.github.io/charts">
  7. <b>Explore Demos »</b>
  8. </a>
  9. </p>
  10. </div>
  11. <p align="center">
  12. <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
  13. <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
  14. </a>
  15. </p>
  16. <p align="center">
  17. <a href="https://frappe.github.io/charts">
  18. <img src=".github/example.gif">
  19. </a>
  20. </p>
  21. ### Contents
  22. * [Installation](#installation)
  23. * [Usage](#usage)
  24. * [License](#license)
  25. #### Installation
  26. * Install via [`npm`](https://www.npmjs.com/get-npm):
  27. ```console
  28. $ npm install frappe-charts
  29. ```
  30. * ...or include within your HTML
  31. ```html
  32. <script src="https://unpkg.com/frappe-charts@0.0.3/dist/frappe-charts.min.iife.js"></script>
  33. ```
  34. #### Usage
  35. ```js
  36. const data = {
  37. labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
  38. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
  39. ],
  40. datasets: [
  41. {
  42. title: "Some Data",
  43. color: "light-blue",
  44. values: [25, 40, 30, 35, 8, 52, 17, -4]
  45. },
  46. {
  47. title: "Another Set",
  48. color: "violet",
  49. values: [25, 50, -10, 15, 18, 32, 27, 14]
  50. }
  51. ]
  52. }
  53. const chart = new Chart({
  54. parent: '#chart',
  55. title: "My Awesome Chart",
  56. data: data,
  57. type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
  58. height: 250
  59. })
  60. ```
  61. If you want to contribute:
  62. 1. Clone this repo.
  63. 2. `cd` into project directory
  64. 3. `npm install`
  65. 4. `npm run dev`
  66. #### License
  67. This repository has been released under the [MIT License](LICENSE)
  68. ------------------
  69. Made with ♥ by [pratu16x7](https://github.com/pratu16x7). Project maintained by [frappe](https://github.com/frappe)