Sparkline

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

Example

import { select } from 'd3-selection';
import { sparkline } from '@britecharts/core';

// dataset: [{ date, value }]
const sparklineChart = sparkline();

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

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

• Sparkline
  • exports(_selection, _data) ⏏
    • static
      • .a11yTitle(_x) ⇒ String | null | module
      • .a11yDescription(_x) ⇒ String | null | module
      • .a11yDataTable(_x) ⇒ Boolean | module
      • .animationDuration(_x) ⇒ duration | module
      • .areaGradient(_x) ⇒ areaGradient | 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
      • .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

a11yTitle(_x) ⇒ String | null | module

Gets or Sets the name screen readers announce for the chart. It is set as the svg's aria-label. Unset, the chart is announced as "Sparkline".

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

Param	Type	Description
_x	String | null	Desired accessible title for the chart

a11yDescription(_x) ⇒ String | null | module

Gets or Sets a longer description screen readers announce after the chart's name, such as what the data shows. It is rendered as the svg's <desc>. Unset, the chart has no description.

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

Param	Type	Description
_x	String | null	Desired accessible description for the chart

a11yDataTable(_x) ⇒ Boolean | module

Gets or Sets whether the chart renders its data as a visually hidden table after its svg, which screen readers can read cell by cell. On by default; set it to false when the app gives the data its own accessible form.

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

Param	Type	Description
_x	Boolean	Whether to render the data table

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

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

exportChart(filename, title) ⇒ Promise

Exports the chart and fires a download: an svg file when the filename ends in .svg, and a png otherwise

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	Name of the downloaded file, whose extension picks the format
title	string	Title to add at the top of the exported picture

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

isAnimated(_x) ⇒ isAnimated | module

Gets or Sets the isAnimated property of the chart, making it to animate when render. The chart draws without animation when the reader's system asks for reduced motion (prefers-reduced-motion), whatever this is set to. 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

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

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

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

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'
    }
]