sparkline

Sparkline

Sparkline Chart reusable API module that allows us rendering a sparkline configurable chart.

Requires: module:d3-array,
Example

const sparkLineChart = sparkline();

sparkLineChart
    .width(200)
    .height(100);

d3Selection.select('.css-selector')
    .datum(dataset)
    .call(sparkLineChart);

• Sparkline
  • exports(_selection, _data) ⏏
    • static
      • .animationDuration(_x) ⇒ duration | module
      • .areaGradient(_x) ⇒ areaGradient | module
      • .dateLabel(_x) ⇒ dateLabel | module
      • .exportChart(filename, title) ⇒ Promise
      • .height(_x) ⇒ height | module
      • .isAnimated(_x) ⇒ isAnimated | module
      • .lineGradient(_x) ⇒ lineGradient | module
      • .isLoading(flag) ⇒ boolean | module
      • .margin(_x) ⇒ object | module
      • .titleText(_x) ⇒ string | module
      • .titleTextStyle(_x) ⇒ Object | module
      • .valueLabel(_x) ⇒ valueLabel | module
      • .width(_x) ⇒ width | module
    • inner
      • ~SparklineChartData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection and data provided

Kind: Exported function

Param	Type	Description
_selection	D3Selection	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	SparklineChartData	The data to attach and generate the chart

exports.animationDuration(_x) ⇒ duration | module

Gets or Sets the duration of the animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	number	1200	Desired animation duration for the graph

exports.areaGradient(_x) ⇒ areaGradient | module

Gets or Sets the areaGradient of the chart

Kind: static method of exports
Returns: areaGradient | module - Current areaGradient or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<string>	= ['#F5FDFF', '#F6FEFC'] Desired areaGradient for the graph

exports.dateLabel(_x) ⇒ dateLabel | module

Deprecated

Gets or Sets the dateLabel of the chart

Kind: static method of exports
Returns: dateLabel | module - Current dateLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	number	Desired dateLabel for the graph

exports.exportChart(filename, title) ⇒ Promise

Chart exported to png and a download action is fired

Kind: static method of exports
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

Param	Type	Description
filename	string	File title for the resulting picture
title	string	Title to add at the top of the exported picture

exports.height(_x) ⇒ height | module

Gets or Sets the height of the chart

Kind: static method of exports
Returns: height | module - Current height or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	number	30	Desired height for the graph

exports.isAnimated(_x) ⇒ isAnimated | module

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'

Kind: static method of exports
Returns: isAnimated | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Default	Description
_x	boolean	false	Desired animation flag

exports.lineGradient(_x) ⇒ lineGradient | module

Gets or Sets the lineGradient of the chart

Kind: static method of exports
Returns: lineGradient | module - Current lineGradient or Chart module to chain calls
Access: public

Param	Type	Description
_x	Array.<string>	= colorHelper.colorGradients.greenBlue Desired lineGradient for the graph

exports.isLoading(flag) ⇒ boolean | module

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
flag	boolean	Desired value for the loading state

exports.margin(_x) ⇒ object | module

Gets or Sets the margin of the chart

Kind: static method of exports
Returns: object | module - Current margin or Chart module to chain calls
Access: public

Param	Type	Description
_x	object	Margin object to get/set

exports.titleText(_x) ⇒ string | module

Gets or Sets the text of the title at the top of sparkline. To style the title, use the titleTextStyle method below.

Kind: static method of exports
Returns: string | module - Current titleText or Chart module to chain calls
Access: public

Param	Type	Description
_x	string	= null String to set

exports.titleTextStyle(_x) ⇒ Object | module

Gets or Sets the text style object of the title at the top of sparkline. Using this method, you can set font-family, font-size, font-weight, font-style, and color (fill). The default text font settings:

Kind: static method of exports
Returns: Object | module - Current titleTextStyle or Chart module to chain calls
Access: public

Param	Type	Description
_x	object	Object with text font configurations

Example

<pre>
<code>
{
   'font-family': 'sans-serif',
   'font-size': '22px',
   'font-weight': 0,
   'font-style': 'normal',
   'fill': linearGradient[0]
}
</code>
</pre>

You can set attributes individually. Setting just 'font-family'
within the object will set custom 'font-family` while the rest
of the attributes will have the default values provided above.

Example

sparkline.titleTextStyle({
   'font-family': 'Roboto',
   'font-size': '1.5em',
   'font-weight': 600,
   'font-style': 'italic',
   'fill': 'lightblue'
})

exports.valueLabel(_x) ⇒ valueLabel | module

Deprecated

Gets or Sets the valueLabel of the chart

Kind: static method of exports
Returns: valueLabel | module - Current valueLabel or Chart module to chain calls
Access: public

Param	Type	Description
_x	number	Desired valueLabel for the graph

exports.width(_x) ⇒ width | module

Gets or Sets the width of the chart

Kind: static method of exports
Returns: width | module - Current width or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	number	100	Desired width for the graph

exports~SparklineChartData : Array.<Object>

Kind: inner typedef of exports
Properties

Name	Type	Description
value	number	Value of the group (required)
name	string	Name of the group (required)

Example

[
    {
        value: 1,
        date: '2011-01-06T00:00:00Z'
    },
    {
        value: 2,
        date: '2011-01-07T00:00:00Z'
    }
]