{"_id":"@anujmohatkar/chartkick","name":"@anujmohatkar/chartkick","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anujmohatkar/chartkick","version":"1.0.0","description":"Create beautiful charts with one line of JavaScript","main":"dist/chartkick.js","scripts":{"build":"rollup -c","lint":"eslint src"},"dependencies":{"highcharts-grouped-categories":"^1.2.0","serve":"^12.0.0","chart.js":">=3.0.2","chartjs-adapter-date-fns":">=2.0.0","date-fns":">=2.0.0"},"keywords":["charts"],"authors":["babarajay, anujmohatkar"],"license":"MIT","devDependencies":{"@rollup/plugin-buble":"^0.21.1","@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-node-resolve":"^11.2.1","eslint":"^7.23.0","rollup":"^2.56.2","rollup-plugin-uglify":"^5.0.2"},"optionalDependencies":{"chart.js":">=3.0.2","chartjs-adapter-date-fns":">=2.0.0","date-fns":">=2.0.0"},"_id":"@anujmohatkar/chartkick@1.0.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-8sOzEGaINJFkt5XmONB+e6Gc/P0aafVO8rEZjKjydfpxHVo/GGFKc8Xn3ZaPo0Dy6/xZ5xozRyzb+DXTvhNu7Q==","shasum":"e77fe586dc323b30c1e21c8a2027e79dad2d79f5","tarball":"https://registry.npmjs.org/@anujmohatkar/chartkick/-/chartkick-1.0.0.tgz","fileCount":10,"unpackedSize":268857,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDIq6mFC2bUD4C53C/51ka9PYfM8WQ0Nb4HUNULrhrlAiEA5bDb0hlIl9pJdrvE9xaV/8Iv2YbOJwq+ptH53IjqxYQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjFvDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFBA//asRRA9nx7+ZJ0s8ievCyyIUu7d+qQ/kZi4X9i17FgcppQw45\r\nG+tNxPlcA3mT82DH+fE5WfuCm8irdAcUZH/uVLmfqJuD4bxPa4dGOOFZjDQ+\r\nZ29ueq9etcakK6UuEtulB6nPyinQ4AhVQtPe9z5R5RiVOyE4l1IdkULUAd4G\r\nX4u7FUyc7XIxHfdq4QyERm5r5oNxTdYuD695/ywPkmASQY7T6cHMqdKZO9Na\r\n74sB3PSWp684IfmF8rxTvFuMJPVWIW0xdIs6LC3LvU6oeaKIKIBM6hzwKUf6\r\nxUIEvMacUZOA5ZJWlUt04a9QOAyTj8fZexHiZiuYbXnmpRF1SKQC967sr69j\r\n4hhUyBBDlROdh7g3r61pFuHAfIsThfNsdkaAhGL60NMI3jN1qkc7UctPHVK0\r\nprpZAbDCphZYuBEh7T7kWSZ3utY3WggD6X/4BXCP2LYEB8XgfUq6jJFY2LFd\r\nSsZ657qEaGU56S4fIglQEUcANcbJp7ALnSMCGKnEhitD8IB6L6VuMG4kSQTT\r\nE0mtQ4xiTUuYdtLqEUG4pBsZOnxp32MKOlvRWyZX6H90q7355oG8pkcBrvEI\r\nAP9dFdsgC6xOLJP7NFRlQsLKq6X/m0B8cnHYbYTWB2ZN/Uh5XSf6Rjz3GlID\r\nq/jxAgktIJHN6h1944Hltln+45UovFeJna4=\r\n=/3eb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anujmohatkar","email":"anujmohatkar1@gmail.com"},"directories":{},"maintainers":[{"name":"anujmohatkar","email":"anujmohatkar1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chartkick_1.0.0_1662447852540_0.9220040991611618"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-06T07:04:12.481Z","1.0.0":"2022-09-06T07:04:12.716Z","modified":"2022-09-06T07:04:12.837Z"},"maintainers":[{"name":"anujmohatkar","email":"anujmohatkar1@gmail.com"}],"description":"Create beautiful charts with one line of JavaScript","keywords":["charts"],"license":"MIT","readme":"# Chartkick.js\n\nCreate beautiful charts with one line of JavaScript\n\n[See it in action](https://ankane.github.io/chartkick.js/examples/)\n\n**Chartkick.js 4.0 was recently released** - see [how to upgrade](#upgrading)\n\nSupports [Chart.js](https://www.chartjs.org/), [Google Charts](https://developers.google.com/chart/), and [Highcharts](https://www.highcharts.com/)\n\nAlso available for [React](https://github.com/ankane/react-chartkick), [Vue.js](https://github.com/ankane/vue-chartkick), [Ruby](https://github.com/ankane/chartkick), [Python](https://github.com/mher/chartkick.py), [Elixir](https://github.com/buren/chartkick-ex), and [Clojure](https://github.com/yfractal/chartkick)\n\n[![Build Status](https://github.com/ankane/chartkick.js/workflows/build/badge.svg?branch=master)](https://github.com/ankane/chartkick.js/actions)\n\n## Quick Start\n\nRun\n\n```sh\nnpm install chartkick chart.js\n```\n\nAnd add\n\n```javascript\nimport Chartkick from \"chartkick\"\nimport \"chartkick/chart.js\"\n```\n\nThis sets up Chartkick with Chart.js. For other charting libraries, see [detailed instructions](#installation).\n\n## Charts\n\nCreate a div for the chart\n\n```html\n<div id=\"chart-1\" style=\"height: 300px;\"></div>\n```\n\nLine chart\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", {\"2021-01-01\": 11, \"2021-01-02\": 6})\n```\n\nPie chart\n\n```javascript\nnew Chartkick.PieChart(\"chart-1\", [[\"Blueberry\", 44], [\"Strawberry\", 23]])\n```\n\nFunnel chart\n\n```javascript\nnew Chartkick.FunnelChart(\"chart-1\", [[\"Submit Survey\", 44], [\"Visit Survey\", 23]])\n```\n\nColumn chart\n\n```javascript\nnew Chartkick.ColumnChart(\"chart-1\", [[\"Sun\", 32], [\"Mon\", 46], [\"Tue\", 28]])\n```\n\nBar chart\n\n```javascript\nnew Chartkick.BarChart(\"chart-1\", [[\"Work\", 32], [\"Play\", 1492]])\n```\n\nArea chart\n\n```javascript\nnew Chartkick.AreaChart(\"chart-1\", {\"2021-01-01\": 11, \"2021-01-02\": 6})\n```\n\nScatter chart\n\n```javascript\nnew Chartkick.ScatterChart(\"chart-1\", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6]])\n```\n\nGeo chart - *Google Charts*\n\n```javascript\nnew Chartkick.GeoChart(\"chart-1\", [[\"United States\", 44], [\"Germany\", 23], [\"Brazil\", 22]])\n```\n\nTimeline - *Google Charts*\n\n```javascript\nnew Chartkick.Timeline(\"chart-1\", [[\"Washington\", \"1789-04-29\", \"1797-03-03\"], [\"Adams\", \"1797-03-03\", \"1801-03-03\"]])\n```\n\nMultiple series\n\n```javascript\ndata = [\n  {name: \"Workout\", data: {\"2021-01-01\": 3, \"2021-01-02\": 4}},\n  {name: \"Call parents\", data: {\"2021-01-01\": 5, \"2021-01-02\": 3}}\n]\nnew Chartkick.LineChart(\"chart-1\", data)\n```\n\nMultiple series stacked and grouped - *Chart.js or Highcharts*\n\n```javascript\ndata = [\n  {name: \"Apple\", data: {\"Tuesday\": 3, \"Friday\": 4}, stack: \"fruit\"},\n  {name: \"Pear\", data: {\"Tuesday\": 1, \"Friday\": 8}, stack: \"fruit\"},\n  {name: \"Carrot\", data: {\"Tuesday\": 3, \"Friday\": 4}, stack: \"vegetable\"},\n  {name: \"Beet\", data: {\"Tuesday\": 1, \"Friday\": 8}, stack: \"vegetable\"}\n]\nnew Chartkick.BarChart(\"chart-1\", data, {stacked: true})\n```\n\n### Say Goodbye To Timeouts\n\nMake your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", \"/stocks\")\n```\n\n### Options\n\nMin and max for y-axis\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {min: 1000, max: 5000})\n```\n\n`min` defaults to 0 for charts with non-negative values. Use `null` to let the charting library decide.\n\nMin and max for x-axis - *Chart.js*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {xmin: \"2021-01-01\", xmax: \"2022-01-01\"})\n```\n\nColors\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {colors: [\"#b00\", \"#666\"]})\n```\n\nStacked columns or bars\n\n```javascript\nnew Chartkick.ColumnChart(\"chart-1\", data, {stacked: true})\n```\n\n> You can also set `stacked` to `percent` or `relative` for Google Charts and `percent` for Highcharts\n\nDiscrete axis\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {discrete: true})\n```\n\nLabel (for single series)\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {label: \"Value\"})\n```\n\nAxis titles\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {xtitle: \"Time\", ytitle: \"Population\"})\n```\n\nStraight lines between points instead of a curve\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {curve: false})\n```\n\nHide points\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {points: false})\n```\n\nShow or hide legend\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {legend: true})\n```\n\nSpecify legend position\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {legend: \"bottom\"})\n```\n\nDonut chart\n\n```javascript\nnew Chartkick.PieChart(\"chart-1\", data, {donut: true})\n```\n\nPrefix, useful for currency - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {prefix: \"$\"})\n```\n\nSuffix, useful for percentages - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {suffix: \"%\"})\n```\n\nSet a thousands separator - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {thousands: \",\"})\n```\n\nSet a decimal separator - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {decimal: \",\"})\n```\n\nSet significant digits - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {precision: 3})\n```\n\nSet rounding - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {round: 2})\n```\n\nShow insignificant zeros, useful for currency - *Chart.js, Highcharts*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {round: 2, zeros: true})\n```\n\nFriendly byte sizes - *Chart.js*\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {bytes: true})\n```\n\nSpecify the message when the chart is loading\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {loading: \"Loading...\"})\n```\n\nSpecify the message when data is empty\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {empty: \"No data\"})\n```\n\nRefresh data from a remote source every `n` seconds\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", url, {refresh: 60})\n```\n\nYou can pass options directly to the charting library with:\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {library: {backgroundColor: \"pink\"}})\n```\n\nSee the documentation for [Chart.js](https://www.chartjs.org/docs/), [Google Charts](https://developers.google.com/chart/interactive/docs/gallery), and [Highcharts](https://api.highcharts.com/highcharts) for more info.\n\nTo customize datasets in Chart.js, use:\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {dataset: {borderWidth: 10}})\n```\n\nYou can pass this option to individual series as well.\n\n### Global Options\n\nTo set options for all of your charts, use:\n\n```javascript\nChartkick.options = {\n  colors: [\"#b00\", \"#666\"]\n}\n```\n\n### Data\n\nPass data as an array or object\n\n```javascript\nnew Chartkick.PieChart(\"chart-1\", {\"Blueberry\": 44, \"Strawberry\": 23})\nnew Chartkick.PieChart(\"chart-1\", [[\"Blueberry\", 44], [\"Strawberry\", 23]])\n```\n\nTimes can be a `Date` or a string (strings are parsed)\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", [[new Date(), 5], [\"2021-01-01 00:00:00 UTC\", 7]])\n```\n\nData can also be a callback\n\n```javascript\nfunction fetchData(success, fail) {\n  success({\"Blueberry\": 44, \"Strawberry\": 23})\n  // or fail(\"Data not available\")\n}\n\nnew Chartkick.LineChart(\"chart-1\", fetchData)\n```\n\n### Multiple Series\n\nYou can pass a few options with a series:\n\n- `name`\n- `data`\n- `color`\n- `dataset` - *Chart.js only*\n- `points` - *Chart.js only*\n- `curve` - *Chart.js only*\n\n### Code\n\nIf you want to use the charting library directly, get the code with:\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {code: true})\n```\n\nThe code will be logged to the JavaScript console.\n\n**Note:** JavaScript functions cannot be logged, so it may not be identical.\n\n### Download Charts\n\n*Chart.js only*\n\nGive users the ability to download charts. It all happens in the browser - no server-side code needed.\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {download: true})\n```\n\nSet the filename\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {download: {filename: \"boom\"}})\n```\n\n**Note:** Safari will open the image in a new window instead of downloading.\n\nSet the background color\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {download: {background: \"#fff\"}})\n```\n\n## Installation\n\n### Chart.js\n\nRun\n\n```sh\nnpm install chartkick chart.js\n```\n\nAnd add\n\n```javascript\nimport Chartkick from \"chartkick\"\nimport \"chartkick/chart.js\"\n```\n\n### Google Charts\n\nRun\n\n```sh\nnpm install chartkick\n```\n\nAnd add\n\n```javascript\nimport Chartkick from \"chartkick\"\n```\n\nAnd include on the page\n\n```html\n<script src=\"https://www.gstatic.com/charts/loader.js\"></script>\n```\n\nTo specify a language or Google Maps API key, use:\n\n```js\nChartkick.configure({language: \"de\", mapsApiKey: \"...\"})\n```\n\nbefore your charts.\n\n### Highcharts\n\nRun\n\n```sh\nnpm install chartkick highcharts\n```\n\nAnd add\n\n```javascript\nimport Chartkick from \"chartkick\"\nimport \"chartkick/highcharts\"\n```\n\n### No Package Manager\n\nDownload [chartkick.js](https://unpkg.com/chartkick) directly.\n\nFor Chart.js (works with 3+), [download it](https://unpkg.com/chart.js@3/dist/chart.js) and the [date-fns adapter bundle](https://unpkg.com/chartjs-adapter-date-fns@2/dist/chartjs-adapter-date-fns.bundle.js) and use:\n\n```html\n<script src=\"/path/to/chart.js\"></script>\n<script src=\"/path/to/chartjs-adapter-date-fns.bundle.js\"></script>\n<script src=\"chartkick.js\"></script>\n```\n\nFor Google Charts, use:\n\n```html\n<script src=\"https://www.gstatic.com/charts/loader.js\"></script>\n<script src=\"chartkick.js\"></script>\n```\n\nFor Highcharts (works with 2.1+), [download it](https://www.highcharts.com/download) and use:\n\n```html\n<script src=\"/path/to/highcharts.js\"></script>\n<script src=\"chartkick.js\"></script>\n```\n\n### Multiple Libraries\n\nIf more than one charting library is loaded, choose between them with:\n\n```javascript\nnew Chartkick.LineChart(\"chart-1\", data, {adapter: \"google\"}) // or highcharts or chartjs\n```\n\n### API\n\nAccess a chart with:\n\n```javascript\nvar chart = Chartkick.charts[\"chart-id\"]\n```\n\nGet the underlying chart object with:\n\n```javascript\nchart.getChartObject()\n```\n\nYou can also use:\n\n```javascript\nchart.getElement()\nchart.getData()\nchart.getOptions()\nchart.getAdapter()\n```\n\nUpdate the data with:\n\n```javascript\nchart.updateData(newData)\n```\n\nYou can also specify new options:\n\n```javascript\nchart.setOptions(newOptions)\n// or\nchart.updateData(newData, newOptions)\n```\n\nRefresh the data from a remote source:\n\n```javascript\nchart.refreshData()\n```\n\nRedraw the chart with:\n\n```javascript\nchart.redraw()\n```\n\nLoop over charts with:\n\n```javascript\nChartkick.eachChart( function(chart) {\n  // do something\n})\n```\n\n## Custom Adapters\n\n**Note:** This feature is experimental.\n\nAdd your own custom adapter with:\n\n```javascript\nvar CustomAdapter = {\n  name: \"custom\",\n  renderLineChart: function (chart) {\n    chart.getElement().innerHTML = \"Hi\";\n  }\n};\n\nChartkick.adapters.unshift(CustomAdapter);\n```\n\n## Examples\n\nTo run the files in the `examples` directory, you’ll need a web server. Run:\n\n```sh\nnpm install -g serve\nserve\n```\n\nand visit [http://localhost:5000/examples/](http://localhost:5000/examples/)\n\n## Upgrading\n\n### 4.0\n\nRun:\n\n```sh\nnpm install chartkick@latest\n```\n\nFor Chart.js, also run:\n\n```sh\nnpm install chart.js@latest\n```\n\nAnd change:\n\n```javascript\nimport Chart from \"chart.js\"\n\nChartkick.use(Chart)\n```\n\nto:\n\n```javascript\nimport \"chartkick/chart.js\"\n```\n\n## History\n\nView the [changelog](https://github.com/ankane/chartkick.js/blob/master/CHANGELOG.md)\n\n## Contributing\n\nEveryone is encouraged to help improve this project. Here are a few ways you can help:\n\n- [Report bugs](https://github.com/ankane/chartkick.js/issues)\n- Fix bugs and [submit pull requests](https://github.com/ankane/chartkick.js/pulls)\n- Write, clarify, or fix documentation\n- Suggest or add new features\n\nTo get started with development:\n\n```sh\ngit clone https://github.com/ankane/chartkick.js.git\ncd chartkick.js\nnpm install\nnpm run build\n\n# start web server\nnpm install -g serve\nserve\n```\n","readmeFilename":"README.md"}