Skip to content
Easily configure a Highcharts JS chart for use in a Rails application
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Highcharts JS Rails

Build Status Dependency Status

Easily configure a Highcharts JS chart for use in a Rails application.

All major options in Highcharts are available to be used with Highcharts JS Rails. However, the exporting and navigation options are not yet built in. You will need to do those manually.

The Highcharts class's methods match up to the corresponding Highcharts options. Take a look at for the full reference.

Many have a default option assigned to them. Those that have one are listed below:

  • chart: renderTo (String)
  • credits: enabled (Boolean)
  • legend: enabled (Boolean)
  • plotOptions.marker: enabled (Boolean)
  • subtitle: text (String)
  • title: text (String)
  • xAxis: categories (Array)
  • setExtremes (function)
  • xAxis.labels: enabled (Boolean)
  • xAxis.title: text (String)
  • yAxis: title (String)
  • setExtremes (function)
  • yAxis.stackLabels: enabled (Boolean)
  • yAxis.labels: enabled (Boolean)
  • yAxis.title: text (String)


Highcharts JS Rails requires Ruby 1.9.2+ and Rails 3.1+.

xAxis Notes

  • The categories option's array of values will be automatically formatted based on its class unless you pass :skip_category_formatting => true.
  • The tickInterval option is only necessary if you want to override automatic tickInterval creation. If the option is not passed or :auto is passed, the tickInterval will be calculated based on the number of categories passed.

For the xAxis, yAxis, and series options, you must pass an array of hashes. Each of those hashes will be converted into the appropriate set of options.



chart = do |chart|
  chart.chart(renderTo: 'graph')
  chart.title('Highcharts Example')
  chart.xAxis(categories: ['October 12', 'October 13', 'October 14'])
  chart.yAxis(title: 'Impressions', min: 0)
  chart.series(name: 'Impressions', yAxis: 0, type: 'line', data: [100000, 122000, 127000])
  chart.legend(layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0)
  chart.tooltip(formatter: "function(){ return '<b>' + + '</b><br/>' + this.x + ': ' + this.y; }")


<%= chart %>
<div id="graph" style="width: 400px; height: 200px;"></div>
You can’t perform that action at this time.