ApexCharts Ruby
  • About
  • Installation
  • Usage
    • Cartesian Charts
      • Cartesian Charts: Part 1
        • Line Chart
        • Stepline Chart
        • Area Chart
        • Column Chart
        • Bar Chart
        • Range Bar Chart
      • Cartesian Charts: Part 2
        • Scatter Chart
        • Candlestick Chart
        • Box Plot Chart
      • Cartesian Charts: Part 3
        • Mixed Charts
        • Syncing Charts
        • Brush Chart
        • Annotations
        • Multiple Y-Axes
    • Heatmap Chart
    • Radar Chart
    • Bubble Chart
    • Polar Charts
      • Pie Chart
      • Donut Chart
      • Radial Bar Chart
  • Data Formats
    • Cartesian Charts
      • Candlestick Chart
      • Box Plot Chart
    • Heatmap Chart
    • Radar Chart
    • Bubble Chart
    • Polar Charts
  • Options
    • Introduction
    • Global Options
    • Formatter Function
    • Defer Chart Rendering
    • Render within a script with type module
  • Miscellaneous
    • Reusable Custom Palette
    • Use Alongside Other Charting Libraries
      • Alongside Chartkick
        • Chartkick (Chart.js) and ApexCharts
        • Chartkick (Google Charts) and ApexCharts
        • Chartkick (Highcharts) and ApexCharts
    • Web Support
      • Rails
      • Sinatra
      • Middleman
      • Plain HTML+ERB (Without Framework)
Powered by GitBook
On this page
  1. Miscellaneous
  2. Web Support

Rails

Require it in your app/assets/javascripts/application.js.

//= require apexcharts

Or, if you use webpacker, you can run:

$ yarn add apexcharts

and then require it in your app/javascript/packs/application.js.

// AMD
window.ApexCharts = require("apexcharts") // expose to window

// or
// ES6
import ApexCharts from 'apexcharts'
window.ApexCharts = ApexCharts

Or, if you use `importmaps', you can:

  1. Download to local vendor directory (optional but recommended)

$ wget -O vendor/javascript/apexcharts.esm.js https://unpkg.com/apexcharts@latest/dist/apexcharts.esm.js
  1. Pin "apexcharts" in config/importmap.rb to local esm file if you did No. 1:

pin "apexcharts", to: "apexcharts.esm.js"

or, to CDN URL directly if you didn't do No. 1:

pin "apexcharts", to: "https://unpkg.com/apexcharts@latest/dist/apexcharts.esm.js"
  1. Import and assign to window in app/javascript/application.js

import ApexCharts from "apexcharts"
window.ApexCharts = ApexCharts
  1. Use it with options module: true

For example:

<% series = [{
    name: "Desktops",
    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
  }]
  options = {
    module: true
  }
%>
<%= line_chart(series, options) %>
PreviousWeb SupportNextSinatra

Last updated 7 months ago