Sandbox: JavaScript

Creats an instance of HighChart with a Behavior-UI customized configuration.

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

JavaScript only does half the work of rendering these charts. The Behavior is fairly easy to use in its most basic configuration. You only really have to pass in a url option or the data itself. Here's what that looks like:

<div data-behavior="Chart ToSource" class="chart" data-chart-options="
  'plotLineWidth': 100,
  'url': '/sandbox/chart/three_lines'
" data-tosource-target="!.example-block .response"></div>

Chart.Stock

This same configuration can be given a series selector by switching behaviors to Chart.Stock:

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