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
  • Candlestick Chart
  • Box Plot Chart
  1. Data Formats

Cartesian Charts

The data format for line, stepline, area, column, bar, and scatter charts should be in following format per-series:

{
  <x value> => <y value>,
  <x value> => <y value>,
  ...
}

or this:

[
  [<x value>, <y value>],
  [<x value>, <y value>],
  ...
]

Candlestick Chart

Candlestick chart is just like other cartesian charts, only the y value is an array of 4 members which called the OHLC (Open-High-Low-Close):

{
  <x value> => [<Open>, <High>, <Low>, <Close>],
  <x value> => [<Open>, <High>, <Low>, <Close>],
  ...
}

or this:

[
  [<x value>, [<Open>, <High>, <Low>, <Close>]],
  [<x value>, [<Open>, <High>, <Low>, <Close>]],
  ...
]

Box Plot Chart

Box plot chart is similar to candlestick chart, only the y value is an array of 5 members (Minimum-First Quartile-Median-Third Quartile-Maximum):

{
  <x value> => [<Min>, <Q1>, <Median>, <Q3>, <Max>],
  <x value> => [<Min>, <Q1>, <Median>, <Q3>, <Max>],
  ...
}

or this:

[
  [<x value>, [<Min>, <Q1>, <Median>, <Q3>, <Max>]],
  [<x value>, [<Min>, <Q1>, <Median>, <Q3>, <Max>]],
  ...
]
PreviousPolar ChartsNextHeatmap Chart

Last updated 1 year ago