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 3.8 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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. * [Updates](#updates)
  25. * [License](#license)
  26. #### Installation
  27. * Install via [`npm`](https://www.npmjs.com/get-npm):
  28. ```console
  29. $ npm install frappe-charts
  30. ```
  31. and include in your project:
  32. ```js
  33. import Chart from "frappe-charts/dist/frappe-charts.min.esm"
  34. ```
  35. * ...or include within your HTML
  36. ```html
  37. <script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script>
  38. ```
  39. #### Usage
  40. ```js
  41. const data = {
  42. labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
  43. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
  44. ],
  45. datasets: [
  46. {
  47. title: "Some Data",
  48. values: [25, 40, 30, 35, 8, 52, 17, -4]
  49. },
  50. {
  51. title: "Another Set",
  52. values: [25, 50, -10, 15, 18, 32, 27, 14]
  53. }
  54. ]
  55. }
  56. const chart = new Chart({
  57. parent: "#chart", // or a DOM element
  58. title: "My Awesome Chart",
  59. data: data,
  60. type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
  61. height: 250,
  62. colors: ['#7cd6fd', '#743ee2'],
  63. format_tooltip_x: d => (d + '').toUpperCase(),
  64. format_tooltip_y: d => d + ' pts'
  65. })
  66. ```
  67. If you want to contribute:
  68. 1. Clone this repo.
  69. 2. `cd` into project directory
  70. 3. `npm install`
  71. 4. `npm run dev`
  72. #### Updates
  73. ##### v0.0.7
  74. - [Custom color values](https://github.com/frappe/charts/pull/71) for charts as hex codes. The API now takes an array of colors for all charts instead of a color for each dataset.
  75. - [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
  76. ##### v0.0.5
  77. - More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
  78. - Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
  79. - Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
  80. ##### v0.0.4
  81. - Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
  82. ##### v0.0.2
  83. - We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
  84. - [@tobiaslins](https://github.com/tobiaslins) contributed tweaks for his quest to make these easy to use with React. Check out his [repo](https://github.com/tobiaslins/frappe-charts-react-example) and updates at [#24](https://github.com/frappe/charts/issues/24) to learn more :)
  85. - A new logo.
  86. ##### v0.0.1
  87. - The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
  88. #### License
  89. This repository has been released under the [MIT License](LICENSE)
  90. ------------------
  91. Project maintained by [Frappe](https://frappe.io).
  92. Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).