HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Plot
A module for creating charts and graphs.
Examples

HTML

<div id="graph-example" class="graph-example hx-margin"></div>

JavaScript


var graph = new hx.Graph('#graph-example')
var axis = graph.addAxis({
  x: {
    title: 'Time'
  },
  y: {
    title: 'Value',
    scalePaddingMax: 0.1
  }
})

var randomSign = function(){
  return Math.random() > 0.5 ? 1 : 0
}

var createData = function(a, b, c) {
  var offset = 0.1 + Math.random()
  return hx.range(50).map(function(i){
    return {
      x: i,
      y: Math.abs(offset + a*Math.sin(i/10) + b*Math.sin(i/20) + c*Math.sin(i/40) + Math.sin(i/50) + Math.sin(i/100))
    }
  })
}

hx.theme().plot.colors.forEach(function(col, i) {
  axis.addSeries('line', {
    title: 'Series ' + (i+1),
    data: createData(randomSign(), randomSign(), randomSign()),
    labelInterpolated: true,
    markersEnabled: true,
    strokeEnabled: true,
    strokeColor: col,
    fillEnabled: true,
    fillColor: hx.color(col).alpha(0.2).toString(),
    group: 'some-group'
  })
})

graph.render()

CSS

.graph-example {
  height: 400px;
}
Api
Change Log
Prototypes
BandSeriesextendsEventEmitter
Used to display a range / interval.
Constructors
BandSeriesoptionsObject
Arguments
options
Properties
classString
The additional class applied to the series svg element.
Default: ''
dataArray[Object]
An array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
fillColorString
The color used to fill the series with as a CSS color string.
Default: [hx.color(hx.theme.plot.colors[2]).alpha(0.2).toString()]
labelFormatters
Optional label formatters for each label value. 
new hx.BandSeries({
  labelFormatters: {
    'x': function(value) { return x },
    'y1': hx.format.si(3),
    'y2': hx.format.si(3)
  }
})
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
The label values extractor that returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
sampleThresholdNumber
The maximum number of data points to render when displaying the graph. If there are more data points in the series data than this value, the data will be sampled.
Default: 200
titleString
The title of the series
Default: ''
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the point on the band that was clicked.
event
The click event data.
series
The selected series.
Methods
classclassStringBandSeries
Sets an additional class to give the series svg element.
Arguments
classString
The class to give the series.
Returns
BandSeries
This BandSeries
classString
Gets the additional class applied to the series svg element.
Returns
String
The additional class applied to the series.
datadataArray[Object]BandSeries
Sets the data for this series
Arguments
dataArray[Object]
An array of objects with x, y1 and y2 properties.The data should be of the form: 
[
  {x: 0, y1: 10, y2: 16},
  {x: 1, y1: 11, y2: 17},
  {x: 2, y1: 16, y2: 16},
  {x: 3, y1: 12, y2: 14}
]
Returns
BandSeries
This BandSeries
dataArray[Object]
Gets the data for this series
Returns
Array[Object]
An array of objects with x, y1 and y2 properties.The data should be of the form: 
[
  {x: 0, y1: 10, y2: 16},
  {x: 1, y1: 11, y2: 17},
  {x: 2, y1: 16, y2: 16},
  {x: 3, y1: 12, y2: 14}
]
fillColorcolorStringBandSeries
Sets the color to fill the band with
Arguments
colorString
A CSS color string.
Returns
BandSeries
This BandSeries
fillColorcolorArray[Object]BandSeries
Sets the color to fill the band with
Arguments
colorArray[Object]
An array of objects which describe a gradient to apply to the band. Colors will be linearly interpolated between the y values specified.
Returns
BandSeries
This BandSeries
fillColorString
Gets the color used to fill the band
Returns
String
The color as a CSS color string
labelFormatternameStringformatterFunctionBandSeries
Sets a label formatter
Arguments
nameString
The formatter to set
formattervalueAnyString
The formatter to use. The formatter converts a value to a string
Arguments
valueAny
Returns
String
The formatted String
Returns
BandSeries
This BandSeries
labelFormatternameStringFunction
Gets a label formatter
Arguments
nameString
The formatter to get
Returns
functionvalueAnyString
The formatter used for the label component. The formatter converts a value to a string. If there was no formatter set, this will return undefined.
Arguments
valueAny
Returns
String
The formatted String
labelInterpolatedinterpolateBooleanBandSeries
Sets whether or not label's values should be interpolated.
Arguments
interpolateBoolean
True to interpolate the labels between data points, false to snap to the closest data point.
Returns
BandSeries
This BandSeries
labelInterpolatedBoolean
Gets whether or not label's values should be interpolated.
Returns
Boolean
True if the labels are interpolated between data points, false if the labels snap to the closest data point.
labelRendererrendererFunctionBandSeries
Sets the label renderer for this series. This allows creation of custom labels
Arguments
rendererelementHtmlElementdataObject
Arguments
elementHtmlElement
The container to populate
data
The data available to be used when rendering the label
Returns
BandSeries
This BandSeries
labelRendererFunction
Gets the label renderer for this series.
Returns
functionelementHTMLElementdataObject
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorextractorFunctionBandSeries
Sets the label values extractor.
Arguments
extractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
Returns
BandSeries
This BandSeries
labelValuesExtractorFunction
Gets the label values extractor.
Returns
functionseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledenabledBooleanBandSeries
Sets whether labels should be used for this series
Arguments
enabledBoolean
True to enable, false to disable
Returns
BandSeries
This BandSeries
labelsEnabledBoolean
Gets whether labels should be displayed for this series
Returns
Boolean
True if they are enabled, false if disabled
sampleThresholdcountNumberBandSeries
Sets the maximum number of data points to render when displaying the graph. If there are more data points in the series data than this value, the data will be sampled.
Arguments
countNumber
The maximum number of data points to display.
Returns
BandSeries
This BandSeries
sampleThresholdNumber
Gets the maximum number of points that will be shown before sampling is applied.
Returns
Number
The sample threshold.
titletitleStringBandSeries
Sets the title of the series
Arguments
titleString
The title to give the series - this will appear in the hover labels.
Returns
BandSeries
This BandSeries
titleString
Gets the title of the series
Returns
String
The title of the series
BarSeriesextendsEventEmitter
A standard bar series. Should be used with a discrete axis.
Constructors
BarSeriesoptionsObject
Arguments
options
Properties
classString
The additional class applied to the series svg element.
Default: ''
dataArray[Object]
n array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
fillColorString
The color used to fill the series with as a CSS color string.
Default: [hx.theme.plot.colors[1]]
groupString
The group the series belongs to. Series with the same group will be stacked on top of each other.
Default: undefined
labelFormatters
Optional label formatters for each label value. 
new hx.BarSeries({
  labelFormatters: {
    'x': function(value) { return x },
    'y': hx.format.si(3)
  }
})
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
The label values extractor that returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
titleString
The title of the series
Default: ''
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the bar that was clicked.
event
The click event data.
series
The selected series.
Methods
classclassStringBarSeries
Note
Sets an additional class to give the series svg elements.
Arguments
classString
The class to give the series.
Returns
BarSeries
This BarSeries
classString
Gets the additional class applied to the series svg elements.
Returns
String
The additional class applied to the series.
datadataArray[Object]BarSeries
Sets the data for this series
Arguments
dataArray[Object]
An array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
Returns
BarSeries
This BarSeries
dataArray[Object]
Gets the data for this series
Returns
Array[Object]
An array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
fillColorcolorStringBarSeries
Sets the color to fill the bar with
Arguments
colorString
A CSS color string.
Returns
BarSeries
This BarSeries
fillColorString
Gets the color used to fill the bar
Returns
String
The color as a CSS color string
groupgroupStringBarSeries
Sets the group the series belongs to. Series with the same group will be visually grouped together.
Arguments
groupString
The class to give the series.
Returns
BarSeries
This BarSeries
groupString
Gets the group the series belongs to.
Returns
String
The group.
labelFormatternameStringformatterFunctionBandSeries
Sets a label formatter
Arguments
nameString
The formatter to set
formattervalueAnyString
The formatter to use. The formatter converts a value to a string
Arguments
valueAny
Returns
String
The formatted String
Returns
BandSeries
This BandSeries
labelFormatternameStringFunction
Gets a label formatter
Arguments
nameString
The formatter to get
Returns
functionvalueAnyString
The formatter used for the label component. The formatter converts a value to a string. If there was no formatter set, this will return undefined.
Arguments
valueAny
Returns
String
The formatted String
labelRendererrendererFunctionBarSeries
Sets the label renderer for this series. This allows creation of custom labels
Arguments
rendererelementHtmlElementdataObject
Arguments
elementHtmlElement
The container to populate
data
The data available to be used when rendering the label
Returns
BarSeries
This BarSeries
labelRendererFunction
Gets the label renderer for this series.
Returns
functionelementHTMLElementdataObject
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorextractorFunctionBandSeries
Sets the label values extractor.
Arguments
extractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
Returns
BandSeries
This BandSeries
labelValuesExtractorFunction
Gets the label values extractor.
Returns
functionseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledenabledBooleanBarSeries
Sets whether labels should be used for this series
Arguments
enabledBoolean
True to enable, false to disable
Returns
BarSeries
This BarSeries
labelsEnabledBoolean
Gets whether labels should be displayed for this series
Returns
Boolean
True if they are enabled, false if disabled
titletitleStringBarSeries
Sets the title of the series
Arguments
titleString
The title to give the series - this will appear in the hover labels.
Returns
BarSeries
This BarSeries
titleString
Gets the title of the series
Returns
String
The title of the series
LineSeriesextendsEventEmitter
A standard line series, made from a set of (x, y) coordinates.
Constructors
LineSeriesoptionsObject
Arguments
options
Properties
classString
The additional class applied to the series svg element.
Default: ''
dataArray[Object]
An array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
fillColorString
The color used to fill the series with as a CSS color string.
Default: undefined
fillEnabledBoolean
Gets whether the path of this series should be filled. True if they are enabled, false if disabled.
Default: false
groupString
The group the series belongs to. Series with the same group will be stacked on top of each other.
Default: undefined
labelFormatters
Optional label formatters for each label value. 
new hx.LineSeries({
  labelFormatters: {
    'x': function(value) { return x },
    'y': hx.format.si(3)
  }
})
labelInterpolatedBoolean
Whether or not label's values should be interpolated. True if the labels are interpolated between data points, false if the labels snap to the closest data point.
Default: false
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
The label values extractor that returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
markerFillColorString
The color used to fill the markers with as a CSS color string. If undefined the strokeColor will be used.
Default: undefined
markerRadiusNumber
The radius of the markers in pixels
Default: 2
markersEnabledBoolean
Whether markers should be placed where there are data points. True if they are enabled, false if disabled
Default: false
sampleThresholdNumber
The maximum number of data points to render when displaying the graph. If there are more data points in the series data than this value, the data will be sampled.
Default: 200
strokeColorString
The color used to stroke the series with as a CSS color string.
Default: [hx.theme.plot.colors[0]]
strokeEnabledBoolean
Whether the path of this series should be stroked. True if they are enabled, false if disabled.
Default: true
titleString
The title of the series
Default: ''
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the point on the line that was clicked.
event
The click event data.
series
The selected series.
Methods
classclassStringLineSeries
Sets an additional class to give the series svg element.
Arguments
classString
The class to give the series.
Returns
LineSeries
This LineSeries
classString
Gets the additional class applied to the series svg element.
Returns
String
The additional class applied to the series.
datadataArray[Object]LineSeries
Sets the data for this series
Arguments
dataArray[Object]
n array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
Returns
LineSeries
This LineSeries
dataArray[Object]
Sets the data for this series
Returns
Array[Object]
n array of objects with x,y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color of the bars can also be set per bar as well: 
[
  {x: 0, y: 10, color: hx.color.graph[1]},
  {x: 1, y: 11, color: hx.color.graph[2]},
  {x: 2, y: 16, color: hx.color.graph[3]},
  {x: 3, y: 12, color: hx.color.graph[4]}
]
fillColorcolorStringLineSeries
Sets the color to fill the series with
Arguments
colorString
A CSS color string.
Returns
LineSeries
This LineSeries
fillColorString
Gets the color used to fill the series with
Returns
String
The color as a CSS color string
fillEnabledenabledBooleanLineSeries
Sets whether the path for this series should be filled
Arguments
enabledBoolean
True to enable, false to disable
Returns
LineSeries
This LineSeries
fillEnabledBoolean
Gets whether the path of this series should be filled
Returns
Boolean
True if they are enabled, false if disabled
groupgroupStringLineSeries
Sets the group the series belongs to. Series with the same group will be stacked on top of each other.
Arguments
groupString
The class to give the series.
Returns
LineSeries
This LineSeries
groupString
Gets the group the series belongs to.
Returns
String
The group.
labelFormatternameStringformatterFunctionLineSeries
Sets a label formatter
Arguments
nameString
The formatter to set
formattervalueAnyString
The formatter to use. The formatter converts a value to a string
Arguments
valueAny
Returns
String
The formatted String
Returns
LineSeries
This LineSeries
labelFormatternameStringFunction
Gets a label formatter
Arguments
nameString
The formatter to get
Returns
functionvalueAnyString
The formatter used for the label component. The formatter converts a value to a string. If there was no formatter set, this will return undefined.
Arguments
valueAny
Returns
String
The formatted String
labelRendererrendererFunctionLineSeries
Sets the label renderer for this series. This allows creation of custom labels
Arguments
rendererelementHtmlElementdataObject
Arguments
elementHtmlElement
The container to populate
data
The data available to be used when rendering the label
Returns
LineSeries
This LineSeries
labelRendererFunction
Gets the label renderer for this series.
Returns
functionelementHTMLElementdataObject
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorextractorFunctionLineSeries
Sets the label values extractor.
Arguments
extractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
Returns
LineSeries
This LineSeries
labelValuesExtractorFunction
Gets the label values extractor.
Returns
functionseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledenabledBooleanLineSeries
Sets whether labels should be used for this series
Arguments
enabledBoolean
True to enable, false to disable
Returns
LineSeries
This LineSeries
labelsEnabledBoolean
Gets whether labels should be displayed for this series
Returns
Boolean
True if they are enabled, false if disabled
markerFillColorcolorStringLineSeries
Sets the color to fill the markers with
Arguments
colorString
A CSS color string.
Returns
LineSeries
This LineSeries
markerFillColorString
Gets the color used to fill the markers with
Returns
String
The color as a CSS color string
markerRadiusradiusNumberLineSeries
Sets the radius of the markers in pixels
Arguments
radiusNumber
A CSS color string.
Returns
LineSeries
This LineSeries
markerRadiusNumber
Gets the radius of the markers in pixels
Returns
Number
The radius of a marker in pixels
markersEnabledenabledBooleanLineSeries
Sets whether markers should be placed where there are data points
Arguments
enabledBoolean
True to enable, false to disable
Returns
LineSeries
This LineSeries
markersEnabledBoolean
Gets whether markers should be placed where there are data points
Returns
Boolean
True if they are enabled, false if disabled
sampleThresholdcountNumberLineSeries
Sets the maximum number of data points to render when displaying the graph. If there are more data points in the series data than this value, the data will be sampled.
Arguments
countNumber
The maximum number of data points to display.
Returns
LineSeries
This LineSeries
sampleThresholdNumber
Gets the maximum number of points that will be shown before sampling is applied.
Returns
Number
The sample threshold.
strokeColorcolorStringLineSeries
Sets the color to stroke the series with
Arguments
colorString
A CSS color string.
Returns
LineSeries
This LineSeries
strokeColorString
Gets the color used to stroke the series with
Returns
String
The color as a CSS color string
strokeEnabledenabledBooleanLineSeries
Sets whether the path for this series should be stroked
Arguments
enabledBoolean
True to enable, false to disable
Returns
LineSeries
This LineSeries
strokeEnabledBoolean
Gets whether the path of this series should be stroked
Returns
Boolean
True if they are enabled, false if disabled
titletitleStringLineSeries
Sets the title of the series
Arguments
titleString
The title to give the series - this will appear in the hover labels.
Returns
LineSeries
This LineSeries
titleString
Gets the title of the series
Returns
String
The title of the series
ScatterSeriesextendsEventEmitter
Displays the data points as dots.
Constructors
ScatterSeriesoptionsObject
Arguments
options
Properties
classString
The additional class applied to the series svg element.
Default: ''
dataArray[Object]
An array of objects with x, y1 and y2 properties.The data should be of the form: 
[
  {x: 0, y1: 10, y2: 16},
  {x: 1, y1: 11, y2: 17},
  {x: 2, y1: 16, y2: 16},
  {x: 3, y1: 12, y2: 14}
]
fillColorString
The color used to fill the series with as a CSS color string.
Default: [hx.theme.plot.colors[3]]
labelFormatters
Optional label formatters for each label value. 
new hx.ScatterSeries({
  labelFormatters: {
    'x': function(value) { return x },
    'y': hx.format.si(3)
  }
})
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
The label values extractor that returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
radiusNumber
The radius of the scatter points for this series. The radius may also be overidden in the data.
Default: 2
titleString
The title of the series
Default: ''
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the point on the graph that was clicked.
event
The click event data.
series
The selected series.
Methods
classclassStringScatterSeries
Sets an additional class to give the series svg elements.
Arguments
classString
The class to give the series.
Returns
ScatterSeries
This ScatterSeries
classString
Gets the additional class applied to the series svg elements.
Returns
String
The additional class applied to the series.
datadataArray[Object]ScatterSeries
Sets the data for this series
Arguments
dataArray[Object]
An array of objects with x, y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color and size of the points can also be supplied with the data: 
[
  {x: 0, y: 10, fillColor: hx.color.graph[1], radius: 1},
  {x: 1, y: 11, fillColor: hx.color.graph[2], radius: 2},
  {x: 2, y: 16, fillColor: hx.color.graph[3], radius: 3},
  {x: 3, y: 12, fillColor: hx.color.graph[4], radius: 4}
]
Returns
ScatterSeries
This ScatterSeries
dataArray[Object]
Gets the data for this series
Returns
Array[Object]
An array of objects with x, y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color and size of the points can also be supplied with the data: 
[
  {x: 0, y: 10, fillColor: hx.color.graph[1], radius: 1},
  {x: 1, y: 11, fillColor: hx.color.graph[2], radius: 2},
  {x: 2, y: 16, fillColor: hx.color.graph[3], radius: 3},
  {x: 3, y: 12, fillColor: hx.color.graph[4], radius: 4}
]
fillColorcolorStringScatterSeries
Sets the color to fill the point with
Arguments
colorString
A CSS color string.
Returns
ScatterSeries
This ScatterSeries
fillColorString
Gets the color used to fill the point
Returns
String
The color as a CSS color string
labelFormatternameStringformatterFunctionScatterSeries
Sets a label formatter
Arguments
nameString
The formatter to set
formattervalueAnyString
The formatter to use. The formatter converts a value to a string
Arguments
valueAny
Returns
String
The formatted String
Returns
ScatterSeries
This ScatterSeries
labelFormatternameStringFunction
Gets a label formatter
Arguments
nameString
The formatter to get
Returns
functionvalueAnyString
The formatter used for the label component. The formatter converts a value to a string. If there was no formatter set, this will return undefined.
Arguments
valueAny
Returns
String
The formatted String
labelRendererrendererFunctionScatterSeries
Sets the label renderer for this series. This allows creation of custom labels
Arguments
rendererelementHtmlElementdataObject
Arguments
elementHtmlElement
The container to populate
data
The data available to be used when rendering the label
Returns
ScatterSeries
This ScatterSeries
labelRendererFunction
Gets the label renderer for this series.
Returns
functionelementHTMLElementdataObject
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorextractorFunctionScatterSeries
Sets the label values extractor.
Arguments
extractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
Returns
ScatterSeries
This ScatterSeries
labelValuesExtractorFunction
Gets the label values extractor.
Returns
functionseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledenabledBooleanScatterSeries
Sets whether labels should be used for this series
Arguments
enabledBoolean
True to enable, false to disable
Returns
ScatterSeries
This ScatterSeries
labelsEnabledBoolean
Gets whether labels should be displayed for this series
Returns
Boolean
True if they are enabled, false if disabled
radiusradiusNumberScatterSeries
Sets the radius of the scatter points for this series. The radius may also be overidden in the data.
Arguments
radiusNumber
The radius of the points in pixels.
Returns
ScatterSeries
This ScatterSeries
radiusNumber
Gets the radius of the scatter points.
Returns
Number
The radius in pixels.
titletitleStringScatterSeries
Sets the title of the series
Arguments
titleString
The title to give the series - this will appear in the hover labels.
Returns
ScatterSeries
This ScatterSeries
titleString
Gets the title of the series
Returns
String
The title of the series
StraightLineSeriesextendsEventEmitter
A Straight line series, that just requires a point that it passes through, and a gradient. This series type is useful for drawing things like lines of best fit.
Constructors
StraightLineSeriesoptionsObject
Arguments
options
Properties
classString
The additional class applied to the series svg element.
Default: ''
dataArray[Object]
An array of objects with x, y properties. The data should be of the form: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The color and size of the points can also be supplied with the data: 
[
  {x: 0, y: 10, fillColor: hx.color.graph[1], radius: 1},
  {x: 1, y: 11, fillColor: hx.color.graph[2], radius: 2},
  {x: 2, y: 16, fillColor: hx.color.graph[3], radius: 3},
  {x: 3, y: 12, fillColor: hx.color.graph[4], radius: 4}
]
labelFormatters
Optional label formatters for each label value. 
new hx.StraightLineSeries({
  labelFormatters: {
    'x': function(value) { return x },
    'y': hx.format.si(3)
  }
})
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
The label values extractor that returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
strokeColorString
The color used to stroke the series with as a CSS color string.
Default: [hx.theme.plot.colors[4]]
titleString
The title of the series
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the point on the line that was clicked.
event
The click event data.
series
The selected series.
Methods
classclassStringStraightLineSeries
Sets an additional class to give the series svg element.
Arguments
classString
The class to give the series.
Returns
StraightLineSeries
This StraightLineSeries
classString
Gets the additional class applied to the series svg element.
Returns
String
The additional class applied to the series.
datadataArray[Object]StraightLineSeries
Sets the data for this series
Arguments
dataArray[Object]
An object describing the line to draw. The data should be of the form:
A line with a gradient: 
{x: 0, y: 10, dx: 2, dy: 3}
Vertical line: 
{x: 50}
Horizontal line: 
{y: 70}
Returns
StraightLineSeries
This StraightLineSeries
dataArray[Object]
Gets the data for this series
Returns
Array[Object]
An object describing the line to draw. The data should be of the form:
A line with a gradient: 
{x: 0, y: 10, dx: 2, dy: 3}
Vertical line: 
{x: 50}
Horizontal line: 
{y: 70}
labelFormatternameStringformatterFunctionStraightLineSeries
Sets a label formatter
Arguments
nameString
The formatter to set
formattervalueAnyString
The formatter to use. The formatter converts a value to a string
Arguments
valueAny
Returns
String
The formatted String
Returns
StraightLineSeries
This StraightLineSeries
labelFormatternameStringFunction
Gets a label formatter
Arguments
nameString
The formatter to get
Returns
functionvalueAnyString
The formatter used for the label component. The formatter converts a value to a string. If there was no formatter set, this will return undefined.
Arguments
valueAny
Returns
String
The formatted String
labelRendererrendererFunctionStraightLineSeries
Sets the label renderer for this series. This allows creation of custom labels
Arguments
rendererelementHtmlElementdataObject
Arguments
elementHtmlElement
The container to populate
data
The data available to be used when rendering the label
Returns
StraightLineSeries
This StraightLineSeries
labelRendererFunction
Gets the label renderer for this series.
Returns
functionelementHTMLElementdataObject
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorextractorFunctionStraightLineSeries
Sets the label values extractor.
Arguments
extractorseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
Returns
StraightLineSeries
This StraightLineSeries
labelValuesExtractorFunction
Gets the label values extractor.
Returns
functionseriesSeriespointObjectxValueLookupFunctionyValueLookupFunctionArray[Object]
Returns the values to display in the label
Arguments
seriesSeries
The Series this label extractor has been applied to
point
The data point to show label data for
xValueLookupAny
Looks up the x value from the data. May be undefined.
Returns
Any
yValueLookupAny
Looks up the y value from the data. May be undefined.
Returns
Any
Returns
Array[Object]
labelsEnabledenabledBooleanStraightLineSeries
Sets whether labels should be used for this series
Arguments
enabledBoolean
True to enable, false to disable
Returns
StraightLineSeries
This StraightLineSeries
labelsEnabledBoolean
Gets whether labels should be displayed for this series
Returns
Boolean
True if they are enabled, false if disabled
strokeColorcolorStringStraightLineSeries
Sets the color to stroke the series with
Arguments
colorString
A CSS color string.
Returns
StraightLineSeries
This StraightLineSeries
strokeColorString
Gets the color used to stroke the series with
Returns
String
The color as a CSS color string
titletitleStringStraightLineSeries
Sets the title of the series
Arguments
titleString
The title to give the series - this will appear in the hover labels.
Returns
StraightLineSeries
This StraightLineSeries
titleString
Gets the title of the series
Returns
String
The title of the series
hx.Axis
Typically this object will be created via graph.addAxis() or graph.addAxis(xScaleType, yScaleType).
Constructors
hx.AxisoptionsObject
Creates a new Axis instance. This should normally be done via graph.addAxis(options) instead.
Arguments
options
Properties
seriesArray[Object]
An array of series objects. Each item in the array is equivalent to a series created using hx.Axis::addSeries A series is defined as an object with two properties: 
{
  type: 'line',   // The series type
  options: {...}  // The series options
}
x
Properties
axisTickLabelPositionBoolean
Sets the axisTickLabelPosi property
Allows positioning of the tick labels. The options are 'axis' or 'bottom'. 'axis' will cause the labels to stick to the axis, 'bottom' will cause the labels to stay at the bottom of the graph area.
Default: 'bottom'
discreteLabelsArray[String]
Sets the discreteLabels property
The set of labels to use for a discrete x axis. This is similar to setting the min and max in linear scale case. The default is 'auto', which will mean that the axis works out it's labels from the series data.
Default: 'auto'
discretePaddingNumber
Sets the discretePadding property
The padding between discrete values on the x axis. Should be a value between 0 and 1. This will affect anything that uses the band width of a tick (ie bar series). The default is 0.1, which results in reserving 10% of the band width for padding, resulting in separation of groups of bar series.
Default: 0,1
doCollisionDetectionBoolean
An option for enabling collision detection on labels.
When this is enabled, labels will be prevented from overlapping by dynamically changing the nthTickVisible property.
Default: true
formattervalueNumberString
The formatter is function that formats the strings that are displayed at the ticks of the axis. It is a function with first argument that will typically be a number (although it depends on the type of the values in your data), and should return a string. The default is hx.format.si(2), which uses SI notation for numbers, and passes strings through untouched.
Default: hx.format.si
Arguments
valueNumber
Returns
String
The number formatted as a string.
gridLinesBoolean
Sets whether or not grid lines should be used for the axis ticks. True means the grid lines will be shown.
Default: true
maxNumber / String
Sets the maximum value the axis should show. If set to 'auto' the maximum value will calculated from the data in the series.
Default: 'auto'
minNumber / String
Sets the minimum value the axis should show. If set to 'auto' the minimum value will calculated from the data in the series.
Default: 'auto'
nthTickVisibleNumber
Sets which ticks should display text. If set to 1, then every tick will have text. If set to 2 every other tick will display text. If set to 3, every third tick will show text. And so on..
Default: 1
scalePaddingMaxNumber
Sets the padding to apply to the end of the axis domain. This option makes it possible to stop the series from touching the axes, if that is wanted. This value is a proportion of the data range, so 0.1 will add an extra 10% to the end of the domain. The default value is 0, which applies no padding.
Default: 0
scalePaddingMinNumber
Sets the scalePaddingMin property
Default: 0
scaleTypeString
The scale type to use. Should be one of 'linear', 'discrete' or 'time'. 'discrete' should be used for bar charts, and 'linear' and 'time' for line graphs (in general). The 'time' scale type is similar to linear, but picks the ticks so that they align on sensible times.
Default: 'linear'
showTicksBoolean
Sets the showTicks property. If true, the axis ticks (text and tick marker) will be visible, if false they will be hidden.
Default: true
tickRotationNumber
Sets the rotation of the ticks in degrees.
Default: 0
tickSpacingNumber
Sets the preferred spacing (in pixels) between ticks on the axis. The axis will do it's best to keep close to this value, but may use other spacing to ensure that other conditions can be met such as the min, max and having 'nice' vales at the ticks.
Default: 50
ticksAllBoolean
Sets whether ticks should be shown for every data point.
Default: false
titleString
Sets the title of the axis
Default: ''
visibleBoolean
Sets the visibility state
Whether or not the x axis should be visible. The default is true.
Default: true
y
Properties
axisTickLabelPositionBoolean
Sets the axisTickLabelPosi property
Allows positioning of the tick labels. The options are 'axis' or 'bottom'. 'axis' will cause the labels to stick to the axis, 'bottom' will cause the labels to stay at the bottom of the graph area.
Default: 'left'
discreteLabelsArray[String]
Sets the discreteLabels property
The set of labels to use for a discrete x axis. This is similar to setting the min and max in linear scale case. The default is 'auto', which will mean that the axis works out it's labels from the series data.
Default: 'auto'
discretePaddingNumber
Sets the discretePadding property
The padding between discrete values on the x axis. Should be a value between 0 and 1. This will affect anything that uses the band width of a tick (ie bar series). The default is 0.1, which results in reserving 10% of the band width for padding, resulting in separation of groups of bar series.
Default: 0,1
doCollisionDetectionBoolean
An option for enabling collision detection on labels.
When this is enabled, labels will be prevented from overlapping by dynamically changing the nthTickVisible property.
Default: true
formattervalueNumberString
The formatter is function that formats the strings that are displayed at the ticks of the axis. It is a function with first argument that will typically be a number (although it depends on the type of the values in your data), and should return a string. The default is hx.format.si(2), which uses SI notation for numbers, and passes strings through untouched.
Default: hx.format.si
Arguments
valueNumber
Returns
String
The number formatted as a string.
gridLinesBoolean
Sets whether or not grid lines should be used for the axis ticks. True means the grid lines will be shown.
Default: true
maxNumber / String
Sets the maximum value the axis should show. If set to 'auto' the maximum value will calculated from the data in the series.
Default: 'auto'
minNumber / String
Sets the minimum value the axis should show. If set to 'auto' the minimum value will calculated from the data in the series.
Default: 'auto'
nthTickVisibleNumber
Sets which ticks should display text. If set to 1, then every tick will have text. If set to 2 every other tick will display text. If set to 3, every third tick will show text. And so on..
Default: 1
scalePaddingMaxNumber
Sets the padding to apply to the end of the axis domain. This option makes it possible to stop the series from touching the axes, if that is wanted. This value is a proportion of the data range, so 0.1 will add an extra 10% to the end of the domain. The default value is 0, which applies no padding.
Default: 0
scalePaddingMinNumber
Sets the scalePaddingMin property
Default: 0
scaleTypeString
The scale type to use. Should be one of 'linear', 'discrete' or 'time'. 'discrete' should be used for bar charts, and 'linear' and 'time' for line graphs (in general). The 'time' scale type is similar to linear, but picks the ticks so that they align on sensible times.
Default: 'linear'
showTicksBoolean
Sets the showTicks property. If true, the axis ticks (text and tick marker) will be visible, if false they will be hidden.
Default: true
tickRotationNumber
Sets the rotation of the ticks in degrees.
Default: 0
tickSpacingNumber
Sets the preferred spacing (in pixels) between ticks on the axis. The axis will do it's best to keep close to this value, but may use other spacing to ensure that other conditions can be met such as the min, max and having 'nice' vales at the ticks.
Default: 50
ticksAllBoolean
Sets whether ticks should be shown for every data point.
Default: false
titleString
Sets the title of the axis
Default: ''
visibleBoolean
Sets the visibility state
Whether or not the x axis should be visible. The default is true.
Default: true
Properties
x
y
Methods
addSeriesseriesSeriesSeries
Adds a Series instance to the axis.
Arguments
seriesSeries
The Series instance to add. Prefer the addSeries(type, name) method if possible.
Returns
Series
addSeriestypeStringoptionsObjectSeries
Adds a new series to the graph. See the related series type prototype options for what to pass in for the options parameter.
Arguments
typeString
The type of series to add. Can be one of 'line', 'bar', 'band', 'scatter' and 'straight-line'
options
The options to pass to the series when constructing.
Returns
Series
Returns a Series instance - LineSeries, BarSeries, BandSeries, ScatterSeries and StraightLineSeries are all instances of Series - one of these types will be returned.
removeSeriesseriesSeriesSeries
Removes a Series from this axis.
Arguments
seriesSeries
The Series to remove.
Returns
Series
The Series removed, or undefined if it was not removed.
seriesArray[Series]
Gets the list of the series attached to this axis
Returns
Array[Series]
The list of series
seriesseriesArray[Series]Axis
Sets the list of the series attached to this axis
Arguments
seriesArray[Series]
The series objects this axis should use.
Returns
Axis
This Axis
hx.GraphextendsEventEmitter
Type for drawing graphs.
Constructors
hx.GraphselectorHTMLElement / StringoptionsObject
Arguments
selectorHTMLElement / String
An HTMLElement or CSS selector which selects the graph's container.
options
Properties
axesArray[Object]
An array of axes objects. Each item in the array is equivalent to an axis created using
][hx.Axis]
See the
][hx.Axis] prototype constructor for details on the available axis options 
{
  x: {...},
  y: {...},
  series: [
    {
      type: 'line',   // The series type
      options: {...}  // The series options
    }
  ]
}
labelsEnabledBoolean
Enables or disables labels. Supplying true enables zoom, false disables it.
Default: true
legendEnabledBoolean
Enables or disables the legends. Supplying true enables zoom, false disables it.
Default: true
legendLocationString
How to display the legend on the graph. Possible modes:
  • 'auto' - moves the legend around to avoid the mouse
  • 'hover' - same as auto, but only displays the legend on mouse hover
  • 'top-right' - displays the legend in the top right
  • 'top-left' - displays the legend in the top left
  • 'bottom-right' - displays the legend in the bottom right
  • 'bottom-left' - displays the legend in the bottom left
Default: "auto"
redrawOnResizeBoolean
Whether or not the graph should automatically be redrawn when the container is resized. By default true.
zoomEnabledBoolean
Enables or disables the zoom with mouse feature. Supplying true enables zoom, false disables it.
Default: false
zoomRangeEndNumber
Sets the end of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Default: 1
zoomRangeStartNumber
Sets the start of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Default: 0
Events
click
The event emitted when a series is clicked.
Properties
data
The data of the point or element that was clicked.
event
The click event data.
series
The selected series.
render
The event emitted when a graph is rendered.
zoom
The event emitted when a series is clicked.
Methods
addAxisAxis
Creates a new axis for this graph with linear scales. Multiple axes can be added to a single graph. Returns the new Axis instance.
Returns
Axis
addAxisaxisAxisAxis
Adds the axis supplied to this graph. An alternative to addAxis(xScaleType, yScaleType). Returns the Axis instance supplied.
Arguments
axisAxis
The axis to add.
Returns
Axis
addAxisoptionsObjectAxis
Creates a new axis with the options specified and adds it to the graph. Returns the new Axis instance.
Arguments
options
Returns
Axis
axesArray[Axis]
Gets the axes attached to the graph.
Returns
Array[Axis]
The list of Axis instances attached to the graph.
axesaxesArray[Axis]Graph
Sets the axes attached to the graph.
Arguments
axesArray[Axis]
The list of Axis instances the graph should have.
Returns
Graph
This Graph
labelsEnabledvalueBooleanGraph
Arguments
valueBoolean
Wheter or not labels should be enabled; true for enabled, false for disabled.
Returns
Graph
This Graph
labelsEnabledBoolean
Gets the value of the labelsEnabled option.
Returns
Boolean
True if labels are enabled, false if disabled.
legendEnabledvalueBooleanGraph
Arguments
valueBoolean
Wheter or the legend should be enabled; true for enabled, false for disabled.
Returns
Graph
This Graph
legendEnabledBoolean
Gets the value of the legendEnabled option.
Returns
Boolean
True if legends are enabled, false if they are disabled.
legendLocationvalueStringGraph
How to display the legend on the graph. Possible modes:
  • 'auto' - moves the legend around to avoid the mouse
  • 'hover' - same as auto, but only displays the legend on mouse hover
  • 'top-right' - displays the legend in the top right
  • 'top-left' - displays the legend in the top left
  • 'bottom-right' - displays the legend in the bottom right
  • 'bottom-left' - displays the legend in the bottom left
Arguments
valueString
One of the position modes from the list above.
Returns
Graph
This Graph
legendLocationString
Gets the value of the legendLocation option. It should be one of the following:
  • 'auto' - moves the legend around to avoid the mouse
  • 'hover' - same as auto, but only displays the legend on mouse hover
  • 'top-right' - displays the legend in the top right
  • 'top-left' - displays the legend in the top left
  • 'bottom-right' - displays the legend in the bottom right
  • 'bottom-left' - displays the legend in the bottom left
Returns
String
The location
redrawOnResizeBoolean
Gets the currently set option for whether the graph should redraw on resizing the container
Returns
Boolean
The currently set value for redrawOnResize
redrawOnResizevalueBooleanGraph
Sets the option for whether the graph should redraw on resizing the container
Arguments
valueBoolean
Whether the graph should redraw on resizing the container
Returns
Graph
This Graph
removeAxisaxisAxisAxis
Removes an axis from the graph.
Arguments
axisAxis
The axis to remove.
Returns
Axis
The removed axis if it was removed, or undefined if it was not removed (because it was not a member of the graph)
renderGraph
Redraws the graph.
Returns
Graph
This Graph
zoomEnabledvalueBooleanGraph
Enables or disables the zoom with mouse feature. Supplying true enables zoom, false disables it.
Arguments
valueBoolean
Wheter or not zoom should be enabled; true for enabled, false for disabled.
Returns
Graph
This Graph
zoomEnabledBoolean
Gets the value of the zoomEnabled option.
Returns
Boolean
True if zoom is enabled, false if it is disabled.
zoomRangeEndvalueNumberGraph
Sets the end of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Arguments
valueNumber
A value between 0 and 1
Returns
Graph
This Graph
zoomRangeEndNumber
Gets the end of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Returns
Number
zoomRangeStartvalueNumberGraph
Sets the start of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Arguments
valueNumber
A value between 0 and 1
Returns
Graph
This Graph
zoomRangeStartNumber
Gets the start of the zoomed region - specified on the 0 to 1 scale where 0 is the left-most value on the x axis, and 1 means the right-most value of the x axis (setting it to 1 will always result in the graph showing nothing).
Returns
Number
hx.PieChart
Type for displaying pie and donut charts.
Constructors
hx.PieChartselectorString / HTMLElementoptionsObject
Creates a new pie chart object.
Arguments
selectorString / HTMLElement
An HTMLElement or CSS selector which selects the graph's container.
options
Properties
fillColorString
The color used to fill the series with as a CSS color string.
Default: [hx.theme.plot.colors[1]]
innerPaddingNumber
The padding at the centre of the pie chart. This can turn a pie chart into a donut chart. This value should be between 0 and 1. A value around 0.5 is good for donut charts.
Default: 0
labelFormattervalueNumber / StringNumber / String
The label formatter for this series.
Default: hx.format.si(2)
Arguments
valueNumber / String
The value point to format
Returns
Number / String
The formatted value point
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelValuesExtractorsegmentObjectringObjectpiePieChartArray[Object]
The label values extractor that returns the values to display in the label
Arguments
segment
The current segment to show label data for
ring
The current ring this label extractor has been applied to
piePieChart
The current pie chart
Returns
Array[Object]
labelsEnabledBoolean
Whether labels should be displayed for this series. True if they are enabled, false if disabled
Default: true
legendEnabledBoolean
Enables or disables the legends. Supplying true enables zoom, false disables it.
Default: true
legendLocationString
How to display the legend on the pie chart. Possible modes:
  • 'auto' - moves the legend around to avoid the mouse
  • 'hover' - same as auto, but only displays the legend on mouse hover
  • 'top-right' - displays the legend in the top right
  • 'top-left' - displays the legend in the top left
  • 'bottom-right' - displays the legend in the bottom right
  • 'bottom-left' - displays the legend in the bottom left
Default: "auto"
ringPaddingNumber
The separation between rings when there are multiple rings. This should be a value between 0 and 1.
Default: 0.1
segmentPaddingNumber
The spacing between the segments. This value is a ratio of the segment width, so that pie charts scale to any size well.
Default: 0
segmentTextEnabledBoolean
Whether or not to display text on each segment. If this is enabled, it is recommended that useLabels is disabled.
Default: false
segmentTextFormattersegmentObjectsegmentsArray[Object]String
Returns the text that should be displayed on a segment if useSegmentText is enabled.
Arguments
segment
The segment to return text for
segmentsArray[Object]
The array of all segments in the ring
Returns
String
The formatted text.
startAngleNumber
The angle that the segments should drawing from in radians. The default is 0, which starts the drawing from 12 o'clock. For drawing a semi-circle donut chart, this could be changed to -Math.PI/2.
Default: 0
totalAngleNumber
The total angle the pie chart should use in radians - the default is 2*Math.PI. This can be used to create semi-circle donut charts.
Default: 2*Math.PI
Events
click
The event emitted when the pie chart is clicked.
Properties
data
The data of the segment that was clicked.
event
The click event data.
series
The series data for the pie chart or pie chart ring.
Methods
dataObject / Array[Object]
Gets the current data of the pie chart
Returns
Object / Array[Object]
The current data
datadataObject / Array[Object]
Sets the data this pie chart should display.
Arguments
dataObject / Array[Object]
The data that describes the pie chart.
The data should be of the form: 
{
  title: "Pie Chart"
  segments: [
    {
      name: "Segment 1"
      size: 10,
      fillColor: hx.cycle(hx.color.graph, 0)
    },
    {
      name: "Segment 2"
      size: 10,
      fillColor: hx.cycle(hx.color.graph, 1)
    },
    {
      name: "Segment 3"
      size: 80,
      fillColor: hx.cycle(hx.color.graph, 2)
    }
  ]
}
For multi-ring pie charts, an array of the above object is expected: 
[
  {
    title: "Series 1"
    segments: [
      {
        name: "Segment 1",
        size: 10,
        fillColor: hx.cycle(hx.color.graph, 0)
      },
      {
        name: "Segment 2",
        size: 10,
        fillColor: hx.cycle(hx.color.graph, 1)
      },
      {
        name: "Segment 3",
        size: 80,
        fillColor: hx.cycle(hx.color.graph, 2)
      }
    ]
  },
  {
    name: "Series 2"
    segments: [
      {
        name: "Segment 1",
        size: 90,
        fillColor: hx.cycle(hx.color.graph, 3)
      },
      {
        name: "Segment 2",
        size: 20,
        fillColor: hx.cycle(hx.color.graph, 4)
      },
      {
        name: "Segment 3",
        size: 30,
        fillColor: hx.cycle(hx.color.graph, 5)
      }
    ]
  },
  {
    name: "Series 3"
    segments: [
      {
        name: "Segment 1",
        size: 90,
        fillColor: hx.cycle(hx.color.graph, 6)
      },
      {
        name: "Segment 2",
        size: 20,
        fillColor: hx.cycle(hx.color.graph, 7)
      },
      {
        name: "Segment 3",
        size: 30,
        fillColor: hx.cycle(hx.color.graph, 8)
      }
    ]
  }
]
fillColorvalueStringPieChart
Sets the default segment fill color value of the pie chart
Arguments
valueString
The default segment fill color
Returns
PieChart
This PieChart
fillColorString
Gets the current default segment fill color of the pie chart
Returns
String
The default segment fill color
innerPaddingvalueNumberPieChart
Sets the inner padding of the pie chart
Arguments
valueNumber
The inner padding to set
Returns
PieChart
This PieChart
innerPaddingNumber
Gets the current inner padding of the pie chart
Returns
Number
The current inner padding
labelFormattervalueFunctionPieChart
Sets the label formatter of the pie chart
Arguments
valuevalueNumber / StringNumber / String
The label formatter to set
Arguments
valueNumber / String
The value point to format
Returns
Number / String
The formatted value point
Returns
PieChart
This PieChart
labelFormatterFunction
Gets the current label formatter of the pie chart
Returns
function
The current label formatter
labelRenderervalueFunctionPieChart
Sets the label renderer of the pie chart
Arguments
valueelementHTMLElementdataObject
The label renderer to set
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
Returns
PieChart
This PieChart
labelRendererFunction
Gets the current label renderer of the pie chart
Returns
function
The current label renderer
labelValuesExtractorvalueFunctionPieChart
Sets the label values extractor of the pie chart
Arguments
valuesegmentObjectringObjectpiePieChartArray[Object]
The label values extractor to set
Arguments
segment
The current segment to show label data for
ring
The current ring this label extractor has been applied to
piePieChart
The current pie chart
Returns
Array[Object]
Returns
PieChart
This PieChart
labelValuesExtractorFunction
Gets the current label values extractor of the pie chart
Returns
function
The current label values extractor
labelsEnabledvalueBooleanPieChart
Sets the labelsEnabled value of the pie chart
Arguments
valueBoolean
Whether the labels should be enabled
Returns
PieChart
This PieChart
labelsEnabledBoolean
Gets the current labelsEnabled of the pie chart
Returns
Boolean
Whether the labels are enabled
legendEnabledvalueBooleanPieChart
Sets the legendEnabled value of the pie chart
Arguments
valueBoolean
Whether the legend should be enabled
Returns
PieChart
This PieChart
legendEnabledBoolean
Gets the current legendEnabled of the pie chart
Returns
Boolean
Whether the legend is enabled
render
Redraws the chart.
ringPaddingvalueNumberPieChart
Sets the ring padding of the pie chart
Arguments
valueNumber
The ring padding to set
Returns
PieChart
This PieChart
ringPaddingNumber
Gets the current ring padding of the pie chart
Returns
Number
The current ring padding
segmentPaddingvalueNumberPieChart
Sets the segment padding of the pie chart
Arguments
valueNumber
The segment padding to set
Returns
PieChart
This PieChart
segmentPaddingNumber
Gets the current segment padding of the pie chart
Returns
Number
The current segment padding
segmentTextEnabledvalueBooleanPieChart
Sets the segmentTextEnabled value of the pie chart
Arguments
valueBoolean
Whether the segment text should be enabled
Returns
PieChart
This PieChart
segmentTextEnabledBoolean
Gets the current segmentTextEnabled of the pie chart
Returns
Boolean
Whether the segment text is enabled
segmentTextFormattervalueFunctionPieChart
Sets the segment text formatter of the pie chart
Arguments
valuesegmentObjectsegmentsArray[Object]String
The segment text formatter to set
Arguments
segment
The segment to return text for
segmentsArray[Object]
The array of all segments in the ring
Returns
String
The formatted text.
Returns
PieChart
This PieChart
segmentTextFormatterFunction
Gets the current segment text formatter of the pie chart
Returns
function
The current segment text formatter
startAnglevalueNumberPieChart
Sets the start angle of the pie chart
Arguments
valueNumber
The start angle to set
Returns
PieChart
This PieChart
startAngleNumber
Gets the current start angle of the pie chart
Returns
Number
The current start angle
totalAnglevalueNumberPieChart
Sets the total angle of the pie chart
Arguments
valueNumber
The total angle to set
Returns
PieChart
This PieChart
totalAngleNumber
Gets the current total angle of the pie chart
Returns
Number
The current total angle
hx.Sparkline
A function for creating a small, inline graph with with no visible axes or ticks.
Constructors
hx.SparklineselectorHTMLElement / StringoptionsObject
Arguments
selectorHTMLElement / String
An HTMLElement or CSS selector which selects the graph's container.
options
The options to use when creating the sparkline
Properties
dataArray
An array of numbers - each number will be a data point in the sparkline.
data
An array of {x, y} objects.
fillColorString
The fill color to use
labelRendererelementHTMLElementdataObject
The label renderer for this series.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
maxNumber / String
The maximum value the y axis should show. If set to 'auto' the maximum value will calculated from the data in the series.
Default: 'auto'
minNumber / String
The minimum value the y axis should show. If set to 'auto' the minimum value will calculated from the data in the series.
Default: 'auto'
redrawOnResizeBoolean
Whether or not the sparkline should automatically be redrawn when the container is resized. By default true.
strokeColorString
The stroke color to use. This only affects the 'line' type.
typeString
The type of sparkline to create. Can be 'bar' or 'line'
Default: 'line'
Methods
dataArray[Object]
Gets the currently set data
Returns
Array[Object]
The currently set data
datavalueArray[Object]Sparkline
Sets the data
Arguments
valueArray[Object]
An array of {x, y} objects.
Returns
Sparkline
This Sparkline
fillColorString
Gets the currently set fill color
Returns
String
The currently set fill color
fillColorvalueStringSparkline
Sets the fill color as a CSS color string
Arguments
valueString
The color to set
Returns
Sparkline
This Sparkline
labelRendererFunction
Gets the label renderer for this sparkline
Returns
functionelementHTMLElementdataObject
The label renderer for this sparkline.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
labelRendererlabelRendererFunctionSparkline
Sets the label renderer for this sparkline
Arguments
labelRendererelementHTMLElementdataObject
The label renderer for for this sparkline.
Arguments
elementHTMLElement
The container populated
data
The data provided for rendering the label
Returns
Sparkline
This Sparkline
redrawOnResizeBoolean
Gets the currently set option for whether the sparkline should redraw on resizing the container
Returns
Boolean
The currently set value for redrawOnResize
redrawOnResizevalueBooleanSparkline
Sets the option for whether the sparkline should redraw on resizing the container
Arguments
valueBoolean
Whether the sparkline should redraw on resizing the container
Returns
Sparkline
This Sparkline
renderSparkline
Renders the sparkline
Returns
Sparkline
This Sparkline
strokeColorString
Gets the currently set stroke color
Returns
String
The currently set stroke color
strokeColorvalueStringSparkline
Sets the stroke color as a CSS color string
Arguments
valueString
The color to set
Returns
Sparkline
This Sparkline
Objects
hx.theme().plot
Properties
ambientColString
An ambient color from the graph palette
coldColString
A colds color from the graph palette (most likely a shade of blue)
colorsArray[String]
A list of graph colors
negativeColString
A negative color from the graph palette (a shade of red)
positiveColString
A positive color from the graph palette (a shade of green)
warmColString
A warm color from the graph palette (red or orange)
warningColString
A warning color from the graph palette (a shade of orange / yellow)
Functions
hx.graphoptionsObject
Creates a new Graph, set up on a detached element, wrapped in a selection.
Axes and series can be added using the options argument.
Arguments
options
The options to use when setting up the graph.
See the options defined in the hx.Graph prototype constructor for details on the available option
hx.pieChartoptionsObjectSelection
Creates a new PieChart set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing PieChart
Returns
Selection
A selection containing an element with an PieChart initialised on it
hx.sparklineoptionsObjectSelection
Creates a new Sparkline set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Sparkline
Returns
Selection
A selection containing an element with an Sparkline initialised on it
Classes
hx-plot-background-ambient
Applies the ambient color from the graph color palette as a background color.
hx-plot-background-cold
Applies the cold color from the graph color palette as a background color.
hx-plot-background-negative
Applies the negative color from the graph color palette as a background color.
hx-plot-background-positive
Applies the positive color from the graph color palette as a background color.
hx-plot-background-warm
Applies the warm color from the graph color palette as a background color.
hx-plot-background-warning
Applies the warning color from the graph color palette as a background color.
hx-plot-text-ambient
Applies the ambient color from the graph color palette to text.
hx-plot-text-cold
Applies the cold color from the graph color palette to text.
hx-plot-text-negative
Applies the negative color from the graph color palette to text.
hx-plot-text-positive
Applies the positive color from the graph color palette to text.
hx-plot-text-warm
Applies the warm color from the graph color palette to text.
hx-plot-text-warning
Applies the warning color from the graph color palette to text.
Getting Started
Graphs
Creating a Graph
A Graph can be created as follows. 
var graph = new hx.Graph('#my-graph-example');
The hx.Graph constructor expects a css selector or a HTMLElement.
Creating an Axis
Before anything can be plotted on this graph, an axis must be added. 
var axis = graph.addAxis();
This will give you a default axis which has linear scales for the x and y axes.
Creating a Series
Once an axis has been created, a series can be added. There are a few different series types available, but for this example a simple line series is used. 
var series = axis.addSeries('line', {title: 'Series Name'});
Setting the data in a Series
The last step is to set the data that this series displays. 
// create some fake data
var data = hx.range(100).map(function(i){return {x: i, y: Math.sin(i/20)} });

// set the series' data
series.data(data);
Rendering the graph
Now that the graph is set up, a call to .render() is needed to actually draw the graph. 
graph.render();
The result is this:
Colors
When working with graphs the colors defined in hx.theme().plot.colors can be used.
Axes
Using Axis objects
An Axis is created with default values for all of its parameters. These can be altered to change the behaviour of the Axis. The Api section below describes all of the properties that can be changed.
In the same way that Axis objects are created/added to Graphs, Series can be added to an Axis. When creating a series, a type and name is expected. The name will be displayed on the graph, and so should be formatted nicely if possible. 
var graph = new hx.Graph('#my-graph-example')
var axis = graph.addAxis()
var series = axis.addSeries('line', 'My Series')
Series
Multiple kinds of series can added to a single axis. Certain series kinds will naturally group together when plotted on the same axis, such as bar series. Series should be created using the addSeries method on Axis.
Line Series

HTML

<div id="line-series-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#line-series-example');
var axis = graph.addAxis({
  y: {
    scalePaddingMax: 0.1
  }
});

var series = axis.addSeries('line', { title: 'Line Series' });

series.data(hx.range(50).map(function(d){ return {x: d, y: Math.cos(d/20)}}));
graph.render();
The data a line series expects is an array of objects with x and y properties: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
Bar Series

HTML

<div id="bar-series-example" class='docs-graph'></div>

JavaScript


var graph = new hx.Graph('#bar-series-example')

var axis = graph.addAxis({
  x: {
    scaleType: 'discrete'
  },
  y: {
    scaleType: 'linear',
    scalePaddingMax: 0.1,
    yMin: 0
  }
});

axis.addSeries('bar', {
  title: 'Bar Series',
  data: hx.range(7).map(function (d) {
    return {
      x: d,
      y: Math.cos(d/10),
      color: hx.theme().plot.colors[d]
    }
  })
});

graph.render();
The data a bar series expects is an array of objects with x and y properties: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
The optional color property can be set per data point for bar series. If set, it should be a css color string.
Stacked Area and Stacked Bar charts
Bar series can be stacked by setting the group property to be the same for all series that you want to stack together. The same also is true of line series.
Stacked Area/Line example:

HTML

<div id="stacked-line-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#stacked-line-example');

var axis = graph.addAxis({
  y: {
    scalePaddingMax: 0.1
  }
});

axis.addSeries('line', {
  title: 'Line Series 1',
  group: 'group-1',
  fillEnabled: true,
  strokeColor: hx.theme().plot.colors[0],
  data: hx.range(200).map(function(d){ return {x: d, y: (1 - Math.sin(d/20))}})
})

axis.addSeries('line', {
  title: 'Line Series 2',
  group: 'group-1',
  fillEnabled: true,
  strokeColor: hx.theme().plot.colors[1],
  data: hx.range(200).map(function(d){ return {x: d, y: (1 - Math.sin(d/20))}})
})

graph.render()
Stacked Bar example:

HTML

<div id="stacked-bar-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#stacked-bar-example');

var axis = graph.addAxis({
  x: {
    scaleType: 'discrete'
  },
  y: {
    scalePaddingMax: 0.1
  }
});

axis.addSeries('bar', {
  title: 'Bar Series 1',
  group: 'group-1',
  fillColor: hx.theme().plot.colors[2],
  data: hx.range(20).map(function(d){ return {x: d, y: (1 - Math.sin(d/20))}})
})

axis.addSeries('bar', {
  title: 'Bar Series 2',
  group: 'group-1',
  fillColor: hx.theme().plot.colors[3],
  data: hx.range(20).map(function(d){ return {x: d, y: (1 - Math.sin(d/20))}})
})

graph.render()
Band Series

HTML

<div id="band-series-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#band-series-example')
var axis = graph.addAxis({
  y: {
    min: 0,
    scalePaddingMin: 0.1,
    scalePaddingMax: 0.1
  }
});

var series = axis.addSeries('band', {
  title: 'Band Series',
  data: hx.range(200).map(function(d){
    return {
      x: d,
      y1: (1 - Math.sin(d/20)),
      y2: (4+Math.sin(d/20))
    }
  })
});

graph.render();
The data a band series expects is an array of objects with x and y1 and y2 properties. y1 is expected to be smaller than y2: 
[
  {x: 0, y1: 10, y2: 16},
  {x: 1, y1: 11, y2: 17},
  {x: 2, y1: 16, y2: 16},
  {x: 3, y1: 12, y2: 14}
]
Scatter Series

HTML

<div id="scatter-series-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#scatter-series-example')

var axis = graph.addAxis({
  x: {
    scalePaddingMin: 0.1,
    scalePaddingMax: 0.1
  },
  y: {
    scalePaddingMin: 0.1,
    scalePaddingMax: 0.1
  }
});

var series = axis.addSeries('scatter', {
  title: 'Scatter Series',
  data: hx.range(100).map(function(d){
    return {
      x: Math.pow(Math.random()-0.5, 3) * 3,
      y: Math.pow(Math.random()-0.5, 3) * 3,
      color: hx.cycle(hx.theme().plot.colors, d)
    }
  })
});

graph.render();
series = axis.addSeries('scatter', 'Series Name')
series.setData(...)
The data a scatter series expects is an array of objects with x and y properties: 
[
  {x: 0, y: 10},
  {x: 1, y: 11},
  {x: 2, y: 16},
  {x: 3, y: 12}
]
Other optional properties that can be set alongside the x any y values for each point are 'color' and 'size'. color should be a css color string, and size should be the radius of the point in pixels (the default is 3).
Straight Line Series

HTML

<div id="straight-series-example" class='docs-graph'></div>

JavaScript

var graph = new hx.Graph('#straight-series-example')

var axis = graph.addAxis({
  x: {
    min: 0,
    max: 5
  },
  y: {
    min: 0,
    max: 5
  }
});

var series = axis.addSeries('straight-line', {
  title: 'Straight Line Series',
  data: {x: 0, y: 2, dx: 1, dy: 0.5}
});

graph.render();
The data a line series expects is an object which has the properties x, y, dx and dy. 
{x: 50, y: 20, dx: 1, dy: 2}
You can also specify just an x value or a y value to draw lines aligned with the axes.
Vertical line: 
{x: 50}
Horizontal line: 
{y: 70}
Pie Charts
Creating a pie chart
Example showing creation of a simple pie chart.

HTML

<div id="docs-pie-example" style="height:200px"></div>

JavaScript

pie = new hx.PieChart('#docs-pie-example');

pie.data({
  title: "Pie Chart",
  segments: [
    {
      name: "Segment 1",
      size: 10,
      fillColor: hx.cycle(hx.theme().plot.colors, 0)
    },
    {
      name: "Segment 2",
      size: 10,
      fillColor: hx.cycle(hx.theme().plot.colors, 1)
    },
    {
      name: "Segment 3",
      size: 80,
      fillColor: hx.cycle(hx.theme().plot.colors, 2)
    }
  ]
});

pie.render();
Donut Charts
Pie charts can be turned into donut charts by simply passing in the innerPadding option when creating a pie: 
new hx.PieChart('#docs-pie2-example',{
  innerPadding: 0.5
});

HTML

<div id="docs-pie2-example" style="height:200px"></div>

JavaScript

pie = new hx.PieChart('#docs-pie2-example',{
  innerPadding: 0.5
});

pie.data({
  title: "Pie Chart",
  segments: [
    {
      name: "Segment 1",
      size: 10,
      fillColor: hx.cycle(hx.theme().plot.colors ,0)
    },
    {
      name: "Segment 2",
      size: 10,
      fillColor: hx.cycle(hx.theme().plot.colors ,1)
    },
    {
      name: "Segment 3",
      size: 80,
      fillColor: hx.cycle(hx.theme().plot.colors ,2)
    }
  ]
});

pie.render();
Multiple ring pie charts
When specifying the data, multiple series can specified. The data supplied must be an array in this case: 
data = [
  {
    title: "Series 1",
    segments: [
      {
        name: "Segment 1",
        size: 10,
        fillColor: hx.cycle(hx.theme().plot.colors, 0)
      },
      {
        name: "Segment 2",
        size: 10,
        fillColor: hx.cycle(hx.theme().plot.colors, 1)
      },
      {
        name: "Segment 3",
        size: 80,
        fillColor: hx.cycle(hx.theme().plot.colors, 2)
      }
    ]
  },
  {
    title: "Series 2",
    segments: [
      {
        name: "Segment 1",
        size: 90,
        fillColor: hx.cycle(hx.theme().plot.colors, 3)
      },
      {
        name: "Segment 2",
        size: 20,
        fillColor: hx.cycle(hx.theme().plot.colors, 4)
      },
      {
        name: "Segment 3",
        size: 30,
        fillColor: hx.cycle(hx.theme().plot.colors, 5)
      }
    ]
  }
]
This would produce the following:

HTML

<div id="docs-pie3-example" style="height:200px"></div>

JavaScript

pie = new hx.PieChart('#docs-pie3-example');

pie.data([
  {
    title: "Series 1",
    segments: [
      {
        name: "Segment 1",
        size: 10,
        fillColor: hx.cycle(hx.theme().plot.colors, 0)
      },
      {
        name: "Segment 2",
        size: 10,
        fillColor: hx.cycle(hx.theme().plot.colors, 1)
      },
      {
        name: "Segment 3",
        size: 80,
        fillColor: hx.cycle(hx.theme().plot.colors, 2)
      }
    ]
  },
  {
    title: "Series 2",
    segments: [
      {
        name: "Segment 1",
        size: 90,
        fillColor: hx.cycle(hx.theme().plot.colors, 3)
      },
      {
        name: "Segment 2",
        size: 20,
        fillColor: hx.cycle(hx.theme().plot.colors, 4)
      },
      {
        name: "Segment 3",
        size: 30,
        fillColor: hx.cycle(hx.theme().plot.colors, 5)
      }
    ]
  }
]);

pie.render();