Sandbox: JavaScript

Less Component Required

Be sure to include Behavior-UI's chart.less in your build.

JavaScript Library Required

In addition to the chart files in Behavior-UI, you will also need the behavior-ui fork of HighStock. Presently, only highstock.src is patched; that's all you need.

Basic Usage

Simple column chart.

<div data-behavior="Chart ToSource" class="full-width chart" data-chart-options="
  'seriesType':'column',
  'xAxis': {
    'type': 'linear',
    'minRange': 1,
    'title': {
      'text': 'Some sort of measurement'
    }
  },
  'url': '/sandbox/chart/columns'
  " data-tosource-target="!.example-block .response"></div>

Stock Chart w/ Multiple Columns

<div data-behavior="Chart.Stock ToSource" class="full-width chart" data-chart-stock-options="
  'seriesType':'column',
  'url': '/sandbox/chart/column_comparison'
  " data-tosource-target="!.example-block .response"></div>

Stock Chart w/ Stacking & Total

<div data-behavior="Chart.Stock ToSource" class="full-width chart" data-chart-stock-options="
  'seriesType':'column',
  'stack': 'normal',
  'url': '/sandbox/chart/column_comparison'
  " data-tosource-target="!.example-block .response"></div>

Stock Chart w/ Stacking & Total

<div data-behavior="Chart.Stock ToSource" class="full-width chart" data-chart-stock-options="
  'showTitle': false,
  'showYAxis': false,
  'showLegend': true,
  'seriesType':'column',
  'columnStacking': 'normal',
  'url': '/sandbox/chart/column_comparison_with_negatives'
" data-tosource-target="!.example-block .response"></div>