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.

Default Usage

Title, Subtitle, Legend.

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

No Title, Subtitle, or Legend

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'seriesType':'column',
  'stack': 'column',
  'showTitle': false,
  'showSubTitle': false,
  'showLegend': false,
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>

Title Only

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'showTitle': true,
  'showSubTitle': false,
  'showLegend': false,
  'seriesType':'column',
  'stack': 'column',
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>

Title and Subtitle Only

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'showTitle': true,
  'showSubTitle': true,
  'showLegend': false,
  'seriesType':'column',
  'stack': 'column',
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>

Title and Legend Only

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'showTitle': true,
  'showSubTitle': false,
  'showLegend': true,
  'seriesType':'column',
  'stack': 'column',
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>

Legend Only

<div data-behavior="Chart.Stock ToSource" class="chart" data-chart-stock-options="
  'showTitle': false,
  'showSubTitle': false,
  'showLegend': true,
  'seriesType':'column',
  'stack': 'column',
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>