API: Sparkline

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

(require("Sparkline"))(_selection, _data)

This function creates the graph using the selection and data provided
Parameters:
Name 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
Source:

Requires

  • module:d3

Methods


module:Sparkline(_selection, _data)

This function creates the graph using the selection and data provided
Parameters:
Name 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
Source:

<static> areaGradient(_x)

Gets or Sets the areaGradient of the chart
Parameters:
Name Type Description
_x Array.<String> Desired areaGradient for the graph
Source:
Returns:
Current areaGradient or Chart module to chain calls
Type
areaGradient | module

<static> dateLabel(_x)

Gets or Sets the dateLabel of the chart
Parameters:
Name Type Description
_x Number Desired dateLabel for the graph
Source:
Returns:
Current dateLabel or Chart module to chain calls
Type
dateLabel | module

<static> duration(_x)

Gets or Sets the duration of the animation
Parameters:
Name Type Description
_x Number Desired animation duration for the graph
Source:
Returns:
Current animation duration or Chart module to chain calls
Type
dateLabel | module

<static> exportChart(filename, title)

Chart exported to png and a download action is fired
Parameters:
Name Type Description
filename String File title for the resulting picture
title String Title to add at the top of the exported picture
Source:

<static> height(_x)

Gets or Sets the height of the chart
Parameters:
Name Type Description
_x Number Desired width for the graph
Source:
Returns:
Current height or Chart module to chain calls
Type
height | module

<static> isAnimated(_x)

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'
Parameters:
Name Type Description
_x Boolean Desired animation flag
Source:
Returns:
Current isAnimated flag or Chart module
Type
isAnimated | module

<static> lineGradient(_x)

Gets or Sets the lineGradient of the chart
Parameters:
Name Type Description
_x Array.<String> Desired lineGradient for the graph
Source:
Returns:
Current lineGradient or Chart module to chain calls
Type
lineGradient | module

<static> loadingState(markup)

Gets or Sets the loading state of the chart
Parameters:
Name Type Description
markup string Desired markup to show when null data
Source:
Returns:
Current loading state markup or Chart module to chain calls
Type
loadingState | module

<static> margin(_x)

Gets or Sets the margin of the chart
Parameters:
Name Type Description
_x Object Margin object to get/set
Source:
Returns:
Current margin or Chart module to chain calls
Type
margin | module

<static> titleText(_x)

Gets or Sets the text of the title at the top of sparkline. To style the title, use the titleTextStyle method below.
Parameters:
Name Type Description
_x String String to set
Source:
Returns:
Current titleText or Chart module to chain calls
Type
String | module

<static> titleTextStyle(_x)

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:

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

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.
Parameters:
Name Type Description
_x Object Object with text font configurations
Source:
Returns:
Current titleTextStyle or Chart module to chain calls
Type
Object | module
Example
sparkline.titleTextStyle({
   'font-family': 'Roboto',
   'font-size': '1.5em',
   'font-weight': 600,
   'font-style': 'italic',
   'fill': 'lightblue'
})

<static> valueLabel(_x)

Gets or Sets the valueLabel of the chart
Parameters:
Name Type Description
_x Number Desired valueLabel for the graph
Source:
Returns:
Current valueLabel or Chart module to chain calls
Type
valueLabel | module

<static> width(_x)

Gets or Sets the width of the chart
Parameters:
Name Type Description
_x Number Desired width for the graph
Source:
Returns:
Current width or Chart module to chain calls
Type
width | module