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 4.5 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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <div align="center">
  2. <img src="https://github.com/frappe/design/blob/master/logos/charts-logo.svg" height="128">
  3. <a href="https://frappe.github.io/charts">
  4. <h2>Frappe Charts</h2>
  5. </a>
  6. <p align="center">
  7. <p>GitHub-inspired modern, intuitive and responsive charts with zero dependencies</p>
  8. <a href="https://frappe.github.io/charts">
  9. <b>Explore Demos »</b>
  10. </a>
  11. </p>
  12. </div>
  13. <p align="center">
  14. <a href="https://travis-ci.org/frappe/charts">
  15. <img src="https://img.shields.io/travis/frappe/charts.svg?style=flat-square">
  16. </a>
  17. <a href="http://github.com/frappe/charts/tree/master/dist/js/frappe-charts.min.iife.js">
  18. <img src="http://img.badgesize.io/frappe/charts/master/dist/frappe-charts.min.iife.js.svg?compression=gzip">
  19. </a>
  20. </p>
  21. <p align="center">
  22. <a href="https://frappe.github.io/charts">
  23. <img src=".github/example.gif">
  24. </a>
  25. </p>
  26. ### Contents
  27. * [Installation](#installation)
  28. * [Usage](#usage)
  29. * [Updates](#updates)
  30. * [License](#license)
  31. #### Installation
  32. * Install via [`npm`](https://www.npmjs.com/get-npm):
  33. ```console
  34. $ npm install frappe-charts
  35. ```
  36. and include in your project:
  37. ```js
  38. import Chart from "frappe-charts/dist/frappe-charts.min.esm"
  39. ```
  40. * ...or include within your HTML
  41. ```html
  42. <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
  43. <!-- or -->
  44. <script src="https://unpkg.com/frappe-charts@1.0.0/dist/frappe-charts.min.iife.js"></script>
  45. ```
  46. #### Usage
  47. ```js
  48. const data = {
  49. labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
  50. "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
  51. ],
  52. datasets: [
  53. {
  54. title: "Some Data", type: "bar",
  55. values: [25, 40, 30, 35, 8, 52, 17, -4]
  56. },
  57. {
  58. title: "Another Set", type: "line",
  59. values: [25, 50, -10, 15, 18, 32, 27, 14]
  60. }
  61. ]
  62. }
  63. const chart = new Chart("#chart", { // or a DOM element
  64. title: "My Awesome Chart",
  65. data: data,
  66. type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
  67. height: 250,
  68. colors: ['#7cd6fd', '#743ee2']
  69. })
  70. ```
  71. If you want to contribute:
  72. 1. Clone this repo.
  73. 2. `cd` into project directory
  74. 3. `npm install`
  75. 4. `npm run dev`
  76. #### Updates
  77. ##### v1.0.0
  78. - Major rewrite out. Some new features include:
  79. - Mixed type axis datasets
  80. - Stacked bar charts
  81. - Value over data points
  82. - Y Markers and regions
  83. - Dot size, Bar space size, and other options
  84. - Legend for axis charts
  85. - We would be looking to incorporate existing PRs and issues in the meantime.
  86. ##### Please read [#93](https://github.com/frappe/charts/issues/93) for v0.1.0 updates on rework and development.
  87. ##### v0.0.7
  88. - [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.
  89. - [@iamkdev's](https://github.com/iamkdev) blog on [usage with Angular](https://medium.com/@iamkdev/frappé-charts-with-angular-c9c5dd075d9f).
  90. ##### v0.0.5
  91. - More [flexible Y values](https://github.com/frappe/charts/commit/3de049c451194dcd8e61ff91ceeb998ce131c709): independent from exponent, minimum Y axis point for line graphs.
  92. - Customisable [Heatmap colors](https://github.com/frappe/charts/pull/53); check out the Halloween demo on the [website](https://frappe.github.io/charts) :D
  93. - Tooltip values can be [formatted](https://github.com/frappe/charts/commit/e3d9ed0eae14b65044dca0542cdd4d12af3f2b44).
  94. ##### v0.0.4
  95. - Build update: [Shipped](https://github.com/frappe/charts/pull/35) an ES6 module, along with the browser friendly IIFE.
  96. ##### v0.0.2
  97. - We have an animated [Pie Chart](https://github.com/frappe/charts/issues/29)! Thanks [@sheweichun](https://github.com/sheweichun).
  98. - [@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 :)
  99. - A new logo.
  100. ##### v0.0.1
  101. - The very first version out, with animatable bars and lines, a percentage chart and a heatmap. GitHub-style.
  102. #### License
  103. This repository has been released under the [MIT License](LICENSE)
  104. ------------------
  105. Project maintained by [Frappe](https://frappe.io).
  106. Used in [ERPNext](https://erpnext.com). Read the [blog post](https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97).