[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7692":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":20,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":16,"starSnapshotCount":16,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},7692,"chartkick","ankane\u002Fchartkick","ankane","Create beautiful JavaScript charts with one line of Ruby","https:\u002F\u002Fchartkick.com",null,"Ruby",6525,560,97,6,0,4,39.25,"MIT License",false,"master",[23,24,25,26,27],"chartjs","charts","google-charts","highcharts","visualization","2026-06-12 02:01:43","# Chartkick\n\nCreate beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries!\n\n[See it in action](https:\u002F\u002Fchartkick.com)\n\n:fire: For admin charts and dashboards, check out [Blazer](https:\u002F\u002Fgithub.com\u002Fankane\u002Fblazer\u002F), and for advanced visualizations, check out [Vega](https:\u002F\u002Fgithub.com\u002Fankane\u002Fvega)\n\n:two_hearts: A perfect companion to [Groupdate](https:\u002F\u002Fgithub.com\u002Fankane\u002Fgroupdate), [Hightop](https:\u002F\u002Fgithub.com\u002Fankane\u002Fhightop), and [ActiveMedian](https:\u002F\u002Fgithub.com\u002Fankane\u002Factive_median)\n\n[![Build Status](https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Factions\u002Fworkflows\u002Fbuild.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Factions)\n\n## Quick Start\n\nAdd this line to your application’s Gemfile:\n\n```ruby\ngem \"chartkick\"\n```\n\nThen follow the instructions for your JavaScript setup:\n\n- [Importmap](#importmap) (Rails default)\n- [Bun, esbuild, rollup.js, or Webpack](#bun-esbuild-rollupjs-or-webpack)\n- [Sprockets](#sprockets)\n\nThis sets up Chartkick with [Chart.js](https:\u002F\u002Fwww.chartjs.org\u002F). For other charting libraries and frameworks, see [these instructions](#additional-charting-libraries).\n\n### Importmap\n\nIn `config\u002Fimportmap.rb`, add:\n\n```ruby\npin \"chartkick\", to: \"chartkick.js\"\npin \"Chart.bundle\", to: \"Chart.bundle.js\"\n```\n\nAnd in `app\u002Fjavascript\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\"\nimport \"Chart.bundle\"\n```\n\n### Bun, esbuild, rollup.js, or Webpack\n\nRun:\n\n```sh\nbun add chartkick chart.js\n# or\nyarn add chartkick chart.js\n```\n\nAnd in `app\u002Fjavascript\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\u002Fchart.js\"\n```\n\n### Sprockets\n\nIn `app\u002Fassets\u002Fjavascripts\u002Fapplication.js`, add:\n\n```js\n\u002F\u002F= require chartkick\n\u002F\u002F= require Chart.bundle\n```\n\n## Charts\n\nLine chart\n\n```erb\n\u003C%= line_chart User.group_by_day(:created_at).count %>\n```\n\nPie chart\n\n```erb\n\u003C%= pie_chart Goal.group(:name).count %>\n```\n\nColumn chart\n\n```erb\n\u003C%= column_chart Task.group_by_hour_of_day(:created_at, format: \"%l %P\").count %>\n```\n\nBar chart\n\n```erb\n\u003C%= bar_chart Shirt.group(:size).sum(:price) %>\n```\n\nArea chart\n\n```erb\n\u003C%= area_chart Visit.group_by_minute(:created_at).maximum(:load_time) %>\n```\n\nScatter chart\n\n```erb\n\u003C%= scatter_chart City.pluck(:size, :population) %>\n```\n\nGeo chart - *Google Charts*\n\n```erb\n\u003C%= geo_chart Medal.group(:country).count %>\n```\n\nTimeline - *Google Charts*\n\n```erb\n\u003C%= timeline [\n  [\"Washington\", \"1789-04-29\", \"1797-03-03\"],\n  [\"Adams\", \"1797-03-03\", \"1801-03-03\"],\n  [\"Jefferson\", \"1801-03-03\", \"1809-03-03\"]\n] %>\n```\n\nMultiple series\n\n```erb\n\u003C%= line_chart [\n  {name: \"Workout\", data: {\"2025-01-01\" => 3, \"2025-01-02\" => 4}},\n  {name: \"Call parents\", data: {\"2025-01-01\" => 5, \"2025-01-02\" => 3}}\n] %>\n```\n\nor\n\n```erb\n\u003C%= line_chart Feat.group(:goal_id).group_by_week(:created_at).count %>\n```\n\n## Data\n\nData can be a hash, array, or URL.\n\n#### Hash\n\n```erb\n\u003C%= line_chart({\"2025-01-01\" => 2, \"2025-01-02\" => 3}) %>\n```\n\n#### Array\n\n```erb\n\u003C%= line_chart [[\"2025-01-01\", 2], [\"2025-01-02\", 3]] %>\n```\n\n#### URL\n\nMake your pages load super fast and stop worrying about timeouts. Give each chart its own endpoint.\n\n```erb\n\u003C%= line_chart completed_tasks_charts_path %>\n```\n\nAnd in your controller, pass the data as JSON.\n\n```ruby\nclass ChartsController \u003C ApplicationController\n  def completed_tasks\n    render json: Task.group_by_day(:completed_at).count\n  end\nend\n```\n\nFor multiple series, add `chart_json` at the end.\n\n```ruby\nrender json: Task.group(:goal_id).group_by_day(:completed_at).count.chart_json\n```\n\n## Options\n\nId, width, and height\n\n```erb\n\u003C%= line_chart data, id: \"users-chart\", width: \"800px\", height: \"500px\" %>\n```\n\nMin and max values\n\n```erb\n\u003C%= line_chart data, min: 1000, max: 5000 %>\n```\n\n`min` defaults to 0 for charts with non-negative values. Use `nil` to let the charting library decide.\n\nMin and max for x-axis - *Chart.js*\n\n```erb\n\u003C%= line_chart data, xmin: \"2025-01-01\", xmax: \"2025-02-01\" %>\n```\n\nColors\n\n```erb\n\u003C%= line_chart data, colors: [\"#b00\", \"#666\"] %>\n```\n\nStacked columns or bars\n\n```erb\n\u003C%= column_chart data, stacked: true %>\n```\n\nDiscrete axis\n\n```erb\n\u003C%= line_chart data, discrete: true %>\n```\n\nLabel (for single series)\n\n```erb\n\u003C%= line_chart data, label: \"Value\" %>\n```\n\nAxis titles\n\n```erb\n\u003C%= line_chart data, xtitle: \"Time\", ytitle: \"Population\" %>\n```\n\nStraight lines between points instead of a curve\n\n```erb\n\u003C%= line_chart data, curve: false %>\n```\n\nHide points\n\n```erb\n\u003C%= line_chart data, points: false %>\n```\n\nShow or hide legend\n\n```erb\n\u003C%= line_chart data, legend: false %>\n```\n\nSpecify legend position\n\n```erb\n\u003C%= line_chart data, legend: \"bottom\" %>\n```\n\nDonut chart\n\n```erb\n\u003C%= pie_chart data, donut: true %>\n```\n\nPrefix, useful for currency - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, prefix: \"$\" %>\n```\n\nSuffix, useful for percentages - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, suffix: \"%\" %>\n```\n\nSet a thousands separator - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, thousands: \",\" %>\n```\n\nSet a decimal separator - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, decimal: \",\" %>\n```\n\nSet significant digits - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, precision: 3 %>\n```\n\nSet rounding - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, round: 2 %>\n```\n\nShow insignificant zeros, useful for currency - *Chart.js, Highcharts*\n\n```erb\n\u003C%= line_chart data, round: 2, zeros: true %>\n```\n\nFriendly byte sizes - *Chart.js*\n\n```erb\n\u003C%= line_chart data, bytes: true %>\n```\n\nSpecify the message when data is loading\n\n```erb\n\u003C%= line_chart data, loading: \"Loading...\" %>\n```\n\nSpecify the message when data is empty\n\n```erb\n\u003C%= line_chart data, empty: \"No data\" %>\n```\n\nRefresh data from a remote source every `n` seconds\n\n```erb\n\u003C%= line_chart url, refresh: 60 %>\n```\n\nYou can pass options directly to the charting library with:\n\n```erb\n\u003C%= line_chart data, library: {backgroundColor: \"#eee\"} %>\n```\n\nSee the documentation for [Chart.js](https:\u002F\u002Fwww.chartjs.org\u002Fdocs\u002F), [Google Charts](https:\u002F\u002Fdevelopers.google.com\u002Fchart\u002Finteractive\u002Fdocs\u002Fgallery), and [Highcharts](https:\u002F\u002Fapi.highcharts.com\u002Fhighcharts) for more info. For Chart.js plugins, check out [this guide](guides\u002FChartjs-Plugins.md).\n\nTo customize datasets in Chart.js, use:\n\n```erb\n\u003C%= line_chart 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, create an initializer `config\u002Finitializers\u002Fchartkick.rb` with:\n\n```ruby\nChartkick.options = {\n  height: \"400px\",\n  colors: [\"#b00\", \"#666\"]\n}\n```\n\nCustomize the html\n\n```ruby\nChartkick.options[:html] = '\u003Cdiv id=\"%{id}\" style=\"height: %{height};\">%{loading}\u003C\u002Fdiv>'\n```\n\nYou capture the JavaScript in a content block with:\n\n```ruby\nChartkick.options[:content_for] = :charts_js\n```\n\nThen, in your layout, use:\n\n```erb\n\u003C%= yield :charts_js %>\n```\n\nFor Padrino, use `yield_content` instead of `yield`.\n\nThis is great for including all of your JavaScript at the bottom of the page.\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```erb\n\u003C%= line_chart data, code: true %>\n```\n\nThe code will be logged to the JavaScript console. 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```erb\n\u003C%= line_chart data, download: true %>\n```\n\nSafari will open the image in a new window instead of downloading.\n\nSet the filename\n\n```erb\n\u003C%= line_chart data, download: {filename: \"boom\"} %>\n```\n\nSet the background color\n\n```erb\n\u003C%= line_chart data, download: {background: \"#ffffff\"} %>\n```\n\nSet title\n\n```erb\n\u003C%= line_chart data, title: \"Awesome chart\" %>\n```\n\n## Additional Charting Libraries\n\n- [Google Charts](#google-charts)\n- [Highcharts](#highcharts)\n\n### Google Charts\n\nIn your layout or views, add:\n\n```erb\n\u003C%= javascript_include_tag \"https:\u002F\u002Fwww.gstatic.com\u002Fcharts\u002Floader.js\" %>\n```\n\nFor Importmap (Rails default), in `config\u002Fimportmap.rb`, add:\n\n```ruby\npin \"chartkick\", to: \"chartkick.js\"\n```\n\nAnd in `app\u002Fjavascript\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\"\n```\n\nFor Bun, esbuild, rollup.js, or Webpack, run:\n\n```sh\nbun add chartkick\n# or\nyarn add chartkick\n```\n\nAnd in `app\u002Fjavascript\u002Fpacks\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\"\n```\n\nFor Sprockets, in `app\u002Fassets\u002Fjavascripts\u002Fapplication.js`, add:\n\n```js\n\u002F\u002F= require chartkick\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\nFor Importmap (Rails default), run:\n\n```sh\nbin\u002Fimportmap pin highcharts --download\n```\n\nAnd in `config\u002Fimportmap.rb`, add:\n\n```ruby\npin \"chartkick\", to: \"chartkick.js\"\n```\n\nAnd in `app\u002Fjavascript\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\"\nimport Highcharts from \"highcharts\"\n\nwindow.Highcharts = Highcharts\n```\n\nFor Bun, esbuild, rollup.js, or Webpack, run:\n\n```sh\nbun add chartkick highcharts\n# or\nyarn add chartkick highcharts\n```\n\nAnd in `app\u002Fjavascript\u002Fpacks\u002Fapplication.js`, add:\n\n```js\nimport \"chartkick\u002Fhighcharts\"\n```\n\nFor Sprockets, download [highcharts.js](https:\u002F\u002Fcode.highcharts.com\u002Fhighcharts.js) into `vendor\u002Fassets\u002Fjavascripts` (or use `yarn add highcharts`), and in `app\u002Fassets\u002Fjavascripts\u002Fapplication.js`, add:\n\n```js\n\u002F\u002F= require chartkick\n\u002F\u002F= require highcharts\n```\n\n### Multiple Libraries\n\nIf more than one charting library is loaded, choose between them with:\n\n```erb\n\u003C%= line_chart data, adapter: \"google\" %> \u003C!-- or highcharts or chartjs -->\n```\n\n## Sinatra and Padrino\n\nDownload [chartkick.js](https:\u002F\u002Fraw.githubusercontent.com\u002Fankane\u002Fchartkick\u002Fmaster\u002Fvendor\u002Fassets\u002Fjavascripts\u002Fchartkick.js) and include it manually.\n\n```html\n\u003Cscript src=\"chartkick.js\">\u003C\u002Fscript>\n```\n\nThen include the charting library.\n\nChart.js - download [Chart.js](https:\u002F\u002Funpkg.com\u002Fchart.js@4\u002Fdist\u002Fchart.umd.js) and the [date-fns adapter bundle](https:\u002F\u002Funpkg.com\u002Fchartjs-adapter-date-fns@3\u002Fdist\u002Fchartjs-adapter-date-fns.bundle.js)\n\n```html\n\u003Cscript src=\"chart.js\">\u003C\u002Fscript>\n\u003Cscript src=\"chartjs-adapter-date-fns.bundle.js\">\u003C\u002Fscript>\n```\n\nGoogle Charts\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fwww.gstatic.com\u002Fcharts\u002Floader.js\">\u003C\u002Fscript>\n```\n\nHighcharts - download [highcharts.js](https:\u002F\u002Fcode.highcharts.com\u002Fhighcharts.js)\n\n```html\n\u003Cscript src=\"highcharts.js\">\u003C\u002Fscript>\n```\n\n## JavaScript 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\u002F\u002F 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\nDestroy the chart with:\n\n```javascript\nchart.destroy()\n```\n\nLoop over charts with:\n\n```javascript\nChartkick.eachChart(function (chart) {\n  \u002F\u002F do something\n})\n```\n\n## Content Security Policy (CSP)\n\nCheck out [how to configure CSP](https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Fblob\u002Fmaster\u002Fguides\u002FContent-Security-Policy.md)\n\n## Tutorials\n\n- [Charts with Chartkick and Groupdate](https:\u002F\u002Fgorails.com\u002Fepisodes\u002Fcharts-with-chartkick-and-groupdate)\n- [Creando gráficos en Ruby on Rails con Chartkick y Chart.js](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=W92AlkwQn3M)\n- [Make Easy Graphs and Charts on Rails with Chartkick](https:\u002F\u002Fwww.sitepoint.com\u002Fmake-easy-graphs-and-charts-on-rails-with-chartkick\u002F)\n- [Practical Graphs on Rails: Chartkick in Practice](https:\u002F\u002Fwww.sitepoint.com\u002Fgraphs-on-rails-chartkick-in-practice\u002F)\n\n## History\n\nView the [changelog](https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Fblob\u002Fmaster\u002FCHANGELOG.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:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Fissues)\n- Fix bugs and [submit pull requests](https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick\u002Fpulls)\n- Write, clarify, or fix documentation\n- Suggest or add new features\n\nTo get started with development:\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002Fankane\u002Fchartkick.git\ncd chartkick\nbundle install\nbundle exec rake test\n```\n","Chartkick 是一个使用 Ruby 代码一行生成美观 JavaScript 图表的库。它支持多种图表类型，如折线图、饼图、柱状图等，并且可以与 Chart.js、Google Charts 和 Highcharts 等流行的图表库集成。通过简单的 API 设计，开发者能够快速地在 Rails 应用中添加数据可视化功能而无需深入学习复杂的前端技术。该项目非常适合需要在 Web 应用程序中展示数据分析结果或创建仪表板的应用场景。MIT 许可证下开源，社区活跃，易于上手和扩展。",2,"2026-06-11 03:13:50","top_language"]