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.

Writing a chart itself requires a fair amount of ruby code on the back to deliver data. Documented here are the Javascript options for the client side of things as well as the conventional arguments passed along to our graphs here at Thanx.

Check out the other pages in the "Thanx Charts" section to see working examples.

On The Server Side

In addition to the client side configuration outlined below, there's much configuration done in the response from the server. You can create multiple series in the same chart area, different chart types (a line graph on top of a chart graph for example), add flags and more. Spend some time digging through the documentation of our existing charts to see how the response is created.

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
tooltips boolean true show tooltips on hover
showTitle boolean true display the title in the chart
showSubTitle boolean true display the subtitle in the chart
showLegend boolean false display the legend for the chart
showMarkers boolean false shows the point markers
exportable boolean true show export controls
navigation boolean ~ navigation config (see HighChart docs)
showLabels boolean false show labels for points
stack string ~ stack the series if 'normal' (by value) or 'percent'
showTotal boolean true when stacking, show the total value
data object ~ the data for the chart; see HighCharts constructor. If not provided, you must specify a value for the url option
dataElement string ~ If provided, finds the element that this option (a selector relative to the target element) references and sets it as data.table so HighCharts can render the graph using the data in the table.
url string ~ if data is at an ajax endpoint, the url for it this is not used if is provied should return the options object for the HighCharts constructor
pointUrl string ~ if set, this url is opened when a point is clicked, passed the data for that point
flagUrl boolean ~ if set, this url is opened when a flag is clicked, passed the data for that point
useSpinner boolean true show an ajax spinner for charts being updated
seriesType string 'spline' what kind of series type to display (other options include line, spline, area, areaspline, scatter, column, bar, pie, etc.)
size object { x: 100, y: 100 } the size of the chart
xAxis object
  type: 'datetime',
  startOnTick: false,
  endOnTick: false,
  minRange: 2 * 24 * 3600000 //2 days
yAxis object
  startOnTick: false,
  endOnTick: false,
  maxPadding: 0.25,
sizeToElement boolean true measure the target element and fill it; if true, options.size is ignored
zoomable boolean false allow the user to zoom in on the chart data; boolean or 'x', 'y', or 'xy'
dateFormat string '%a - %b %d, %Y' See MooTools' Date docs.
plotBorderWidth number 1 the border around the plot area
plotBorderColor string '#eee' A valid color (hex, rgb, rgba) for the border around the plot area.
plotBackgroundColor string ~ A valid color (hex, rgb, rgba) for the background of the chart. Defaults to transparent.
fetchEvery number 0 If set, the chart will refresh itself at an interval of this value (in milliseconds).

Behavior.Thanx.Stock Options

These options only affect the stock charts.

Name type default description
rangeSelector object
  rangeSelector: {
    inputEnabled: false,
    buttons: [{
      type: 'month',
      count: 1,
      text: '1m'
    }, {
      type: 'month',
      count: 2,
      text: '2m'
    }, {
      type: 'month',
      count: 3,
      text: '3m'
    selected: 0
The settings for the range selector below the chart. See Highcharts API for alternate configuration.

V2 Style options

Name type default description
v2Styles Boolean true Enables the Merchant v2 specific styles.
columnGrouping String 'auto' For column charts that are time series, you can group by day, week, or month. If you set it to auto the chart changes based on how much is made visible by the user.
legendRowSize Number 23 Pixels to dedicate for each row of the legend.
legendRowMargin Number 10 Margin above and below the legend rows.
legendItemWidth Number 189 How wide to make the legend items; overflow is ellipsed.
baseHeight Number 467 Height of the chart minus the legend and space for the title and the plotMarginTopBase.
showFlagsInLegend Boolean false Include flags in the legend (allows them to be turned off).
navigatorSeriesColor String ~ The color of the series in the navigator; hex, rgb, or rgba if not specified uses the first color in the colors array in options.
colors Array [#00CCCE','#2ECC71','#27AE60','#AC69C7','#0073BF'] The default set of colors.
showLegend Boolean true In v2 styles, the legend defaults to being displayed IF there's more than one series. You can explicitly set it to true and it'll show regardless of how many series there are.
dateFormat Number %a, %b %e, %Y" The date format for the tooltip header (when it's a date). This is just a different default than the options above.
margin Number [30, 90, 30, 90] This defines the margin of the layout. Note that the first number here is basically ignored as the chart dervives its height based on the various sizing options outlined below.