Options

Options

<linechart options="options"></linechart>

<script>
  ...
  $scope.options = {
    optName: "optValue"
  }
</script>

Name	Type	Default	Description
lineMode	String	"linear"	Sets the line interpolation mode for all series with the type line and area. Possible modes are "linear", "step-before", "step-after", "basis", "basis-open", "basis-closed", "bundle", "cardinal" (most popular smooth interpolation), "cardinal-open", "cadinal-closed" and "monotone".
tension	Number ∈ (0, 1]	0.7	Sets the default tension for cardinal interpolations (1 equals linear). (See issue #44 about that.)
drawLegend	Boolean	true	Enables/disables the displaying of the chart's legend.
drawDots	Boolean	true	Enables/disables the drawing of dots for data points for all series with the type line and area.
hideOverflow	Boolean	false	Shows/hides the overflowing data of the chart area; clips the data in the chart area to avoid displaying negative values for certain lineModes (e.g. cardinal) or when zooming is enabled if set to true. (See issue #120 about that.)
columnsHGap	Number	5	Sets the space between two columns in pixels for all series with the type column.

Axes

<linechart options="options"></linechart>

<script>
  ...
  $scope.options = {
    axes: {
      x: {optName: "optValue"},
      y: {optName: "optValue"},
      y2: {optName: "optValue"}
    }
  }
</script>

Name	Type	Default	Description
key	String	"x"	Defines where the chart will look for abscissas values in the data.
type	String	"linear"	Sets the data type of the axis; it can be either linear or date (or log for y and y2 axes). If set to date, the chart will expect Date objects as abscissas. No transformation is done by the chart itself, so the behavior is basically D3.js' time scale's.
tickFormat	String/Function	""	Format string, that is parsed with d3.format (d3.time.format for type date) to format the axis' ticklabels. By default the raw values are used unformatted. Supplying a function as value allows to format the axis' ticklabels; must be a function that accepts a single argument and returns a string.
tooltipFormat	String	""	Format string, that is parsed with d3.format (d3.time.format for type date) to format the axis' tooltip values in tooltip mode axes. By default, it uses the same format as ticksFormat.
tooltipFormatter	Function	undefined	Function that allows to format the axis' tooltip values in tooltip mode axes; must be a function that accepts a single argument and returns a string.
ticksRotate	Number ∈ [-45, 45]	0	Defines the rotation of the tick labels in degrees (positive values rotate clockwise, and negative vales counter clockwise)
min	Number/Date	auto	Forces the axis minimum value (default is computed from data)
max	Number/Date	auto	Forces the axis maximum value (default is computed from data)
ticks	Number/Array	auto	Configures the axis' ticks; can be either a number of tick values or an array of tick values. (more on this here.)
ticksInterval	Number/Function	auto	Configures the step size of tick values; can be also set to a range or time range function (e.g. d3.time.minute). (more on this here.)
innerTicks	Boolean	false	Displays a small line for every tick when set to true.
grid	Boolean	false	Displays a grid lines for every tick when set to true.
zoomable	Boolean	false	Enables zooming and panning for this axes when set to true.

Series

<linechart options="options"></linechart>

<script>
  ...
  $scope.options = {
    series: [
     {optName: "optValue"},
     {optName: "optValue"}
    ]
  }
</script>

Name	Type	Default	Description
y	String	""	mandatory, defines which property on each data row will be used as ordinate value.
color	String	""	Specify a color (any valid HTML color) for a series; if none given, the chart will set it for you.
label	String	""	Name of the series that will be used in the legend; if undefined, the y value will be used.
axis	String	"y"	Defines which vertical axis should be used for this series; can be either y (for left) or y2 (for right)
type	String	"line"	Defines the series type; can be either line, area or column
striped	Boolean	false	Enables/disables striped areas for the series type area.
thickness	String	"1px"	Sets the thickness of the lines for series type area or line.
lineMode	String	""	Renders the series as dashed line if set to dashed for series type line or area
drawDots	Boolean	true	Defines whether the series is rendered with dots on a per series basis; overrides the global setting.
visible	Boolean	true	Defines whether the series is initially visible. Will be updated if the series gets hidden or shown through a click on the legend.
dotSize	Number	2	Sets the dot size for series with type line and area.

Stacks

With the optional stacks key one can stack multiple series into a single stacked series.

<script>
  ...
  $scope.options = {
    stacks: [
     {series: ["series0", "series1", "series2"], axis: "y"},
     {series: ["series0", "series1"], axis: "y"}
    ]
  }
</script>

Name	Type	Default	Description
series	Array[String, String, ...]	[ ]	Contains the series ids of the series that should be stacked together
axis	String	"y"	Defines the axis on which the new stacked series should be displayed. Valid values are y or y2.

Tooltip

<script>
  ...
  $scope.options = {
    tooltip: {
      mode: "scrubber",
      interpolate: false,
      formatter: function(x, y, series, raw){
        return x + ": " + y;
      }
    }
  }
</script>

Name	Type	Default	Description
mode	String	"scrubber"	Sets the tooltip mode; either none, axes, or scrubber.
interpolate	Boolean	false	Enables/disables interpolation for the tooltip mode scrubber.
formatter	Function	undefined	Allows to modify the tooltip label in mode scrubber. Must be a function that takes x, y, series and raw (the raw data point from the original data array) as arguments and returns a string.

Margin

<script>
  ...
  $scope.options = {
    margin: {
      left: 50,
      top: 20,
      right: 50,
      bottom: 60
    }
  }
</script>

Name	Type	Default	Description
left	Number	50	Left margin of the chart; area of the y axis
top	Number	20	Top margin of the chart
right	Number	50	Right margin of the chart; area of the y2 axis
bottom	Number	60	Bottom margin of the chart; area of the x axis and the legend

Attributes

<linechart attr-name="attr-value"></linechart>

Name	Type	Default	Description
width	Number	auto	The chart tries to infer its width regarding its parent element. If this fails for some reasons (parent element is not visible), please use this attribute!
height	Number	auto	The chart tries to infer its height regarding its parent element. If this fails for some reasons (parent element is not visible), please use this attribute!
mode	String	""	The mode can be set to thumbnail. If so, the chart will take as much space as it can, and it will only display the series. No axes, no legend, no tooltips. Furthermore, the lines or areas will be drawn without dots. This is convenient for sparklines.

Events

<linechart event-name="eventHandler"></linechart>

<script>
  ...
  $scope.eventHandler = function(d, i, series, raw) { ... }
</script>

Name	Description
on-click	The event handler for a click event triggers when the mouse clicks on a dot or column of the chart.
on-hover	The event handler for a hover event triggers when the mouse hovers over a dot or column of the chart.
on-focus	The event handler for a focus event triggers when the mouse hovers over the chart in tooltip mode scrubber.
on-toggle	The event handler for a toggle event triggers when a series changes its visibility.

Click

$scope.onClick = function(data, index, series, raw){
  console.log(data, index);
}

<linechart data="data" options="options" on-click="onClick"></linechart>

Hover

$scope.onHover = function(data, index, series, raw){
  console.log(data, index);
}

<linechart data="data" options="options" on-hover="onHover"></linechart>

Focus

$scope.onFocus = function(data, index, position, series, raw){
  console.log(data, index, position, series, raw);
}

<linechart data="data" options="options" on-focus="onFocus"></linechart>

Toggle

$scope.onToggle = function(data, index, visible){
  console.log(data, index, visible);
}

<linechart data="data" options="options" on-toggle="onToggle"></linechart>