Jelly-Chart

Class: Line

Line

new Line()

renders a line chart
Source:

Extends

Methods

areaGradient( [areaGradient])

If areaGradient is specified sets the areaGradient setting and returns the Line instance itself. If areaGradient is true, when a line chart shape area, each area filled gradient.
Parameters:
Name Type Argument Default Description
areaGradient boolean <optional>
 false If is true, each area filled gradient.
Source:
Returns:
Type
areaGradient | Line
Example
line.areaGradient(true)

axis( [axis] [, adding])

If axis is specified, append it to axis settings and returns the instance itself. If axis is a string, it refers axis's target(x or y) and will be converted to an object. If axis is an array of objects, replaces existing axis settings. If axis is not specified, returns the current axis settings. If axis exists and adding is false, it removes the existing axis settign which has the same target of axis.
Parameters:
Name Type Argument Default Description
axis string | object | Array.<Object> <optional>
Properties
Name Type Argument Default Description
target string x target scale's name
orient string <optional>
 bottom top|right|bottom|left
thickness number <optional>
 18
showDomain boolean <optional>
 true
showticks boolean <optional>
 true
compressTicks boolean <optional>
 false if is true, only first or end value of the tick shown.
showTitle boolean <optional>
 true
title string <optional>
titleOrient string <optional>
 top|right|bottom|left
autoTickFormat boolean <optional>
 if is true, not apply dimension and measure's format.
adding boolean <optional>
 true if adding is false, removes existing the axis specified target.
Inherited From:
Overrides:
Source:
Returns:
Type
axis | RectLinear
Example
rectLinear.axis('x') // sets X-axis on the bottom side
 .axis({target: 'y', orient: 'right', showTicks: false, title: 'Custom Axis Y'}) // sets Y-axis on the right side
rectLinear.axis('y', false) // removes existing Y-axis

axisTitle(targetAndField, title)

sets a custom title of an axis. Filters axes, returning the axis that has the same target and field whith targetAndField, then sets or remove it's title. If title is false the selected axis's custom title will be removed. Actually, .axisTitle method manipulates axisTitles.
Parameters:
Name Type Description
targetAndField string | object
Properties
Name Type Argument Description
target string
field string <optional>
title string
Inherited From:
Overrides:
Source:
Returns:
Type
RectLinear
Example
rectLinear.axisTitle('x', 'custom Axis X')
rectLinear.axisTitle('y.Sales', 'custom Axis Y')
rectLinear.axisTitle({target:'y', field: 'Sales'}, 'custom Axis X')
rectLinear.axisTitle('x', false);

axisTitles( [axisTitles])

set axis titles directly.
Parameters:
Name Type Argument Description
axisTitles Array.<Object> <optional>
axisTitles[].target string target scale name of the axis(x|y)
axisTitles[].title string title to show
axisTitles[].field string <optional>
 target field name of the axis
Inherited From:
Overrides:
Source:
Returns:
Type
axisTitles | RectLinear
Example
rectLinear.axisTitles({target:'x', title: 'custom title X'});

brush( [brush])

If brush is specified, sets the brush settings and returns the instance itself. If brush is true, renders its brush. If brush is not specified, returns the instance's current brush setting.
Parameters:
Name Type Argument Default Description
brush boolean <optional>
 false
Inherited From:
Source:
Returns:
Type
brush | BrushMixin
Example
brush.brush(true); //shows brush

color(color)

If color is specified, sets color schemes in array and returns the instance itself. The color schemes is used for color marks of the chart and follows CSS color type. If color is not specified, returns the instance's current color schemes.
Parameters:
Name Type Default Description
color string | Array.<string> defaultSchemes color schemes
Inherited From:
Source:
Returns:
Type
color | Core
Example
core.color('red');
core.color(['#fff', 'steelblue', 'rgb(128, 128, 128)']);
core.color();

colorDomain( [colorDomain])

If colorDomain is specified, match color domain and color schemes manually. If colorDomain is not specified, returns the instance's current colorDomain. ColorDomain is an array of objects includes a key and a color(optional) property. If a color peroperty is not specified, uses a color in internal color schemes in order. Also, if an element of array is string type, it translates into an object with a key property.
Parameters:
Name Type Argument Description
colorDomain Array.<string> | Array.<object> <optional>
colorDomain[].key string | number
colorDomain[].color string <optional>
Inherited From:
Source:
Example
bar.data([
   {name: 'A', value: 10},
   {name: 'B', value: 20},
   {name: 'C', value: 30},
   {name: 'D', value: 40}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value'])
 .color(['red', 'green', 'blue', 'yellow'])
 .colorDomain(['B', {key: 'A', color: 'orange'}, {key: 'D'}]) 
 // sets bar A: orange / bar B: red / bar C: blue / bar D: green

container( [container])

The Core method `.container` sets a selector of a chart holder element or an element itself as its container. Core finds the holder element and renders a chart on it. If container is specified, sets a selector or a element and returns the instance itself. If container is not specified, returns the instance's current container.
Parameters:
Name Type Argument Description
container string | Element <optional>
 a selector or an element
Inherited From:
Source:
Returns:
Type
string | Element | Core
Example
core.container('#chart-container'); //sets a selector of a chart holder element as its container
core.container(document.getElementById('chart-container')); //sets an element as its container
core.container(); //returns the current container;

curve( [curve])

sets a curve type. If is not specified, returns the current curve setting.
Parameters:
Name Type Argument Default Description
curve string <optional>
 linear (linear|stepped|curved)
Inherited From:
Source:
Returns:
Type
curve | SeriesMixin
Example
series.curve('curved') //renders Catmull-Rom spline curve
series.curve();

customDomain( [customDomain])

The Core method `.customDomain` sets a user-defined domain of a measrure variable. It's reflection differs based on the char type. If customDomain is specified, sets a selector or a element and returns the instance itself. If customDomain is not specified, returns the instance's current customDomain.
Parameters:
Name Type Argument Description
customDomain Array.<Number> <optional>
 a user-defined domain of a measrure variable
Inherited From:
Source:
Returns:
Type
customDomain | Core
Example
core.customDomain([0, 100]); //sets a custom domain;
core.container(); //returns the current custom domain;

data( [data])

If data is specified, sets data and returns the instance itself. The data shoud be an array of objects, and the object includes the properties used as dimensions and measures. If data is not specified, returns the instance's current data.
Parameters:
Name Type Argument Description
data Array.<Object> <optional>
Inherited From:
Source:
Returns:
Type
data | Core
Example
core.data([
   {name: 'a', value: 10},
   {name: 'a', value: 100},
   {name: 'b', value: 20}
 ]) //sets data
 .dimensions(['name'])
 .measures(['value']); 

core.data(); //returns the current data;

demute(nodeOrRegion)

recovers the selection's opacity from Core#mute
Parameters:
Name Type Description
nodeOrRegion d3Selection the selection of nodes and regions in the chart
Inherited From:
Source:
Returns:
Type
Core

demuteLegend( [exceptionFilter])

Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name Type Argument Description
exceptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Inherited From:
Source:
Returns:
Type
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

demuteNodes( [excemptionFilter])

Fiters nodes according to excemptionFilter in the chart and demutes the nodes. If excemptionFilter is no specified, demutes all nodes.
Parameters:
Name Type Argument Description
excemptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Inherited From:
Source:
Returns:
Type
Core
Example
core.demuteNodes('Sales'); // nodes whose key is not 'Sales' are demuted
core.demuteNodes(d => d.key !== 'Sales') // nodes whose key is not 'Sales' are demuted

dimension(dimension)

appends a dimension to dimensions array. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a mark(region or node) according to its chart type and level.
Parameters:
Name Type Description
dimension string | object
Properties
Name Type Argument Default Description
field string refers a key property in objects from the data array. The key property will be invoked for each element in the input array and must return a string identifier to assign the element to its group.
order string <optional>
 natural chooses comparator types among natural, ascending and descending, sorting nodes in selected order.
max number <optional>
 100 maximum number of nodes
format string | function <optional>
 a time formatter for the given string specifier
formatSub string | function <optional>
 a sub-time formatter for the given string specifier, which used sub-ticks on it's axis.
interval string <optional>
 If the dimension has Date type values, set an interval which is a conventional unit of time to grouped its value.
Inherited From:
Source:
Returns:
Type
Core
Example
core.dimension({field:'Sales', order:'ascending'});
core.dimension({field: 'Sales Date', format: '%y', interval: 'year'})
core.dimension('Profit');

dimensions( [dimensions])

If dimensions is specified, sets dimensions and returns the instance itself. If dimensions is an object or string, it would be turned into an array with a dimension. If dimensions is not specified, returns the instance's current dimensions. A dimenension(key) acts as an index that is used to look up measure(value). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions; multi-dimensions can make multiple levels of grouping. The combination of all dimensions would be unique for each item. Each dimension is converted into a region or a node according to its chart type and level.
Parameters:
Name Type Argument Description
dimensions string | object | Array.<Object> <optional>
 sets a dimension array which are objects has properties for aggregation(grouping).
Inherited From:
Source:
Returns:
Type
dimensions | Core
Example
bar.data([
   {category:'Blue', name: 'A', value: 10},
   {category:'Blue', name: 'B', value: 20},
   {category:'Blue', name: 'C', value: 30},
   {category:'Blue', name: 'D', value: 40},
   {category:'Red', name: 'A', value: 20},
   {category:'Red', name: 'B', value: 10},
   {category:'Red', name: 'C', value: 40},
   {category:'Red', name: 'D', value: 10},
 ]) //sets data
 .dimensions(['category', {field:'name', order:'ascending'}])
 //generates a grouped bar chart which has 2 regions (Red, Blue) with 4 bars(A,B,C,D) each.

domain(name)

gets a domain of the scale with a specified name
Parameters:
Name Type Description
name string
Inherited From:
Source:

facet( [facet])

If facet is specified, sets the facet settings and returns the instance itself. If is true, renders vertical oriented partitions. If is a string or object, it changes the orient of partitions. If is false, renders in the default way. If facet is not specified, returns the instance's current facet setting.
Parameters:
Name Type Argument Default Description
facet boolean | string | object <optional>
 false (false|true|vertical|horizontal)
Properties
Name Type Argument Default Description
orient string <optional>
 vertical
Inherited From:
Source:
Returns:
Type
facet | Facet
Example
facet.facet(true) // renders vertical partitions
facet.facet('horizontal')
facet.facet({orient: 'vertical'})
facet.facet() // returns the current setting

filterNodes(filter)

Fiters nodes in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name Type Description
filter string | function The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Inherited From:
Source:
Returns:
Type
d3Selection
Example
core.filterNodes(function(d) {
   return d.key === key;
})

filterRegions(filter)

Fiters regions in the chart, returning a new selection that contains only the elements for which the specified filter is true.
Parameters:
Name Type Description
filter string | function The filter may be specified either as a selector stringfilter is or a function. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Inherited From:
Source:
Returns:
Type
d3Selection
Example
core.filterRegions(function(d) {
   return d.key === key;
})

fitLine( [fitLine])

If is true, renders a mean line of serieses or points. If is not specified, returns the current fitLine setting.
Parameters:
Name Type Argument Default Description
fitLine boolean <optional>
 false
Inherited From:
Source:
Returns:
Type
fitLine | FitLineMixin
Example
fitLineMixin.fitLine(true)

font( [fontStyle])

If fontStyle is specified, sets the font styles to the specified object and returns the instance itself. If fontStyle is not specified, returns the instance's current fontStyle.
Parameters:
Name Type Argument Description
fontStyle object <optional>
Properties
Name Type Default Description
font-family string sans-serif
font-size number 12
font-weight string lighter
font-style string normal
Inherited From:
Source:
Returns:
Type
fontStyle | Core
Example
core.font({'font-size': 16}); //sets th font size to 16px, then returns core itself;
core.font(); //returns the current fontStyle object;

grid( [grid])

If grid is specified, sets grid setting and returns the instance itself. If grid is true, shows grids of axes. If grid is not specified, it returns the current grid setting.
Parameters:
Name Type Argument Default Description
grid boolean <optional>
 false
Inherited From:
Overrides:
Source:
Returns:
Type
grid | RectLinear

height( [height])

If height is specified, sets height of the container and returns the instance itself. The unit of height is a pixel. If height is not specified, returns the instance's current height.
Parameters:
Name Type Argument Default Description
height number <optional>
 480 height of the container
Inherited From:
Source:
Returns:
Type
height | Core
Example
core.height(600); //sets a custom height;
core.height(); //returns the current height;

individualScale( [individualScale])

If individualScale is specified sets the individualScale setting and returns the Line instance itself. When a line chart has multiple measures, each measure will be a series. If individualScale is true, when has multiple measures, each series will be drawn based on an individual scale of itself.
Parameters:
Name Type Argument Default Description
individualScale boolean <optional>
 false If is true, renders a mean-line.
Source:
Returns:
Type
individualScale | Line
Example
line.individualScale(true)

innerSize(needArray)

returns an inner size of chart excepting offsets from the container's size
Parameters:
Name Type Default Description
needArray boolean false If needArray is true, retruns the size in array
Inherited From:
Source:
Returns:
returns {width, height} or [width, height] according to needArray
Type
object | array

label( [label])

If label is specified as true, sets the chart to show labels on its marks and returns the instance itself. If label is not specified, returns the instance's current height.
Parameters:
Name Type Argument Default Description
label boolean <optional>
 false whether to show labels on marks
Inherited From:
Source:
Returns:
Type
label | Core
Example
core.label(true); //shows labels
core.label(); //returns the current height;

leastSquare( [key])

gets a result of linear least squres from serieses. If key is specified, returns the value only froma specific series. It is used for draw fit-lines.
Parameters:
Name Type Argument Description
key string <optional>
 a name of a series
Source:
Returns:
returns [{key: fitLineVal, slope, intercept, rSquare}...]
Type
Array.<object>
Example
let l = line.data([
 {name: 'A', sales: 10, profit: 5},
 {name: 'B', sales: 20, profit: 10},
 {name: 'C', sales: 30, profit: 3},
 ...
 ]) //sets data
 .dimensions(['name'])
 .measures(['sales', 'profit'])
 .render();
l.leastSquare('A') // returns a result of the series A
l.leastSquare() // returns from all serieses

legend( [legend])

If legend is specified, sets the legend object which includes an orient and a thickness of the legend. If legend is a boolean, it would be tured into an object with a bottom orient and a default thickness. Also, is a string, it would become a orient of an object. If legend is not specified, returns the instance's current legend.
Parameters:
Name Type Argument Description
legend boolean | string | object <optional>
 sets a legend type. If is a false, removes the legend.
Properties
Name Type Argument Default Description
orient string bottom sets a legend orient(top|right|bottom|left)
align string <optional>
 start sets a legend align(start|middle|end)
thickness number <optional>
 (54|162) sets a legend thickness. if the orient is top or bottom, the default thickness is 54 pixels. Otherwise, it would be 162 pixels.
Inherited From:
Source:
Returns:
Type
legend | Core
Example
core.legend(true); //sets {orient: 'bottom', thickness: 54}
core.legend({orient:'right', thickness: 200}); 
core.legend();

limitKeys(limitNumber)

limits the number of nodes length as many as limitNumber.
Parameters:
Name Type Description
limitNumber number
Inherited From:
Source:
Returns:
Type
Core
Example
core.limitKeys(10);

limitRows(limitNumber)

limits the number of elements length from the data as many as limitNumber, in order.
Parameters:
Name Type Description
limitNumber number
Inherited From:
Source:
Returns:
Type
Core
Example
core.limitRows(100);

margin( [margin])

If margin is specified, sets margin of the container and returns the instance itself. The unit of margin is a pixel. If margin is not specified, returns the instance's current margin.
Parameters:
Name Type Argument Description
margin object <optional>
Properties
Name Type Argument Default Description
top number <optional>
 40 top
right number <optional>
 40 right
bottom number <optional>
 40 bottom
left number <optional>
 40 left
Inherited From:
Source:
Returns:
Type
margin | Core
Example
core.margin({top:100, right: 100}); //sets the margin's top and right amount
core.margin();

meanLine( [meanLine])

If meanLine is specified sets the meanLine setting and returns the Line instance itself. If meanLine is true renders a mean-line on each series. If meanLine is not specified, returns the current meanLine setting.
Parameters:
Name Type Argument Default Description
meanLine boolean <optional>
 false If is true, renders a mean-line.
Source:
Returns:
Type
meanLine | Line
Example
line.meanLine(true)

measure(measure)

appends a measure to measures array. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for measure is dependent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name Type Description
measure string | object
Properties
Name Type Argument Default Description
field string <optional>
 refers a value property in objects from the data array. The value property will be invoked for leaf elements during aggregation and their values in the property will be summarized by the specified operator as an value.
op string <optional>
 sum an operator(sum, mean, variance, min, max, median) to summarize leaf elements.
format string <optional>
 a time formatter for the given string specifier
Inherited From:
Source:
Returns:
Type
Core
Example
core.measure({field:'Sales', 'op': 'mean'});
core.measure('Profit');

measures( [measures])

If measures is specified, sets measures and returns the instance itself. If measures is an object or string, it would be turned into an array with a measure. If measures is not specified, returns the instance's current measures. A measure(value) acts as an value that is looked up by dimensions(key). A synonym for dimension is independent attribute. Jelly-chart has data in an array to be grouped into a hierarchical tree structure with dimensions. If measures are specified, leaves of the tree will be summarized by them.
Parameters:
Name Type Argument Description
measures string | object | Array.<Object> <optional>
 sets a measure array which are objects has properties for aggregation(grouping).
Inherited From:
Source:
Returns:
Type
measures | Core
Example
bar.data([
   {name: 'A', sales: 10},
   {name: 'B', sales: 20},
   {name: 'C', sales: 30},
   {name: 'D', sales: 40},
   {name: 'A', sales: 20},
   {name: 'B', sales: 10},
   {name: 'C', sales: 40},
   {name: 'D', sales: 10},
 ]) //sets data
 .dimensions(['name'])
 .measures([{field:'sales', op: 'mean'}])
 //generates a mono bar chart with 4 bars(A,B,C,D).
 //each bar's length will be determined mean of 'sales' values from leaf elements.

multiTooltip( [multiTooltip])

If is true, renders the tooltip showing multiple points on the same horizontal position. If is a string or object, sets sorting order of items by each value. If multiTooltip is not specified, returns the instance's multiTooltip setting.
Parameters:
Name Type Argument Default Description
multiTooltip boolean | string | object <optional>
 false
Properties
Name Type Argument Default Description
sortByValue string <optional>
 natural (natural|ascending|descending)
Source:
Returns:
Type
multiTooltip | Line
Example
line.multiTooltip(true) // show multiple points on the same horizontal position on a tooltip
line.multiTooltip('ascending') //sort items in ascending order by their each value
line.multiTooltip(false) 
line.multiTooltip()

mute(nodeOrRegion [, intensity])

transparentize the selection's opacity by Core#muteIntensity
Parameters:
Name Type Argument Description
nodeOrRegion d3Selection the selection of nodes and regions in the chart
intensity number <optional>
Inherited From:
Source:
Returns:
Type
Core

muteIntensity( [muteIntensity])

If muteIntensity is specified, sets muteIntensity of the chart and returns the instance itself. MuteIntensity determines opacity of marks which is muted by .mute method. If muteIntensity is not specified, returns the instance's current width.
Parameters:
Name Type Argument Default Description
muteIntensity number <optional>
 0.3 opacity of muted marks
Inherited From:
Source:
Returns:
Type
muteIntensity | Core
Example
core.muteIntensity(0.5); //sets a custom width;
core.muteIntensity(); //returns the current width;

muteLegend( [exceptionFilter])

Fiters labels with a key different with exceptionFilter in the chart's legend, demute the selection.
Parameters:
Name Type Argument Description
exceptionFilter string | function <optional>
 If the fiter is a string, select nodes which has different key with the filter. If the a function, it is evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]).
Inherited From:
Source:
Returns:
Type
Core
Example
core.demuteLegend('Sales'); // recover opacity of muted labels, whose key is not 'Sales', in the legend;

nodes()

returns all nodes
Inherited From:
Source:
Returns:
nodes
Type
d3Selection

offset()

returns offsets around the content area, that includes the margin, legend area
Inherited From:
Overrides:
Source:
Returns:
{top, right, bottom, left} offset in pixels
Type
object

padding( [padding])

sets the padding to the same padding value. Depending on the chart type and its scale type, padding will be applied differently. If padding is not specified, returns the instance's current padding value.
Parameters:
Name Type Argument Default Description
padding number <optional>
 0
Inherited From:
Source:
Returns:
Type
padding | PaddingMixin
Example
paddingMixin.padding(0.5)
paddingMixin.padding()

point( [point])

If is true, renders a point mark on each data point. If is not specified, returns the current point setting.
Parameters:
Name Type Argument Default Description
point boolean <optional>
 false
Inherited From:
Source:
Returns:
Type
point | SeriesMixin
Example
series.point(true)

pointRatio( [pointRatio])

sets point radius relative to the line width. If is not specified, returns the current pointRatio setting.
Parameters:
Name Type Argument Default Description
pointRatio number <optional>
 3
Inherited From:
Source:
Returns:
Type
pointRatio | SeriesMixin
Example
series.pointRatio(5) // the point radius will be 5 times as large as the line width.

process( [type] [, call] [, option])

sets and gets rendering procedures.
Parameters:
Name Type Argument Description
type string <optional>
call function <optional>
option object <optional>
Properties
Name Type Description
after string
allow function
Inherited From:
Source:
Returns:
Type
process | Array.<process> | Core

regionPadding( [regionPadding])

sets the regionPadding to the same padding value. Depending on the chart type and its scale type, it will be applied differently. If regionPadding is not specified, returns the instance's current regionPadding value.
Parameters:
Name Type Argument Default Description
regionPadding number <optional>
 0
Inherited From:
Source:
Returns:
Type
regionPadding | PaddingMixin
Example
paddingMixin.regionPadding(0.5)
paddingMixin.regionPadding()

regions()

returns all regions
Inherited From:
Source:
Returns:
regions
Type
d3Selection

render( [keep] [, skip])

renders the chart. At the end of settings for a chart, it should be called. If keep is true, it does not reset existing scales.
Parameters:
Name Type Argument Default Description
keep boolean <optional>
 false If is true, not reset existing scales.
skip Array.<String> <optional>
 [] If skip includes an process, the process will be ignored.
Inherited From:
Source:
Returns:
Type
Core

reset( [keep])

reset the chart
Parameters:
Name Type Argument Default Description
keep boolean <optional>
 false If keep is true, not reset existing scales.
Inherited From:
Source:
Returns:
Type
Core

scale( [name])

If name is specified, returns a scale with the name in existing scales. If name is not specified, returns an object includes all scales.
Parameters:
Name Type Argument Description
name string <optional>
Inherited From:
Source:
Returns:
Type
object | function
Example
core.scale('color'); //returns the color scale;
core.scale() // returns the scale object

shape( [shape])

selects a shape type. Available shapes depends on the chart type. If shape is not specified, returns the current shape setting.
Parameters:
Name Type Argument Description
shape string <optional>
Inherited From:
Source:
Returns:
Type
shape | ShapeMixin
Example
line.shape('area')
parCoords.shape('scatter-matrix')
treemap.shape('pack')

showTooltip(keys)

shows a tooltip on a node which has the same keys.
Parameters:
Name Type Argument Description
keys string <repeatable>
 Keys from the leaf to parents
Inherited From:
Source:
To Do:
  • not work for a multiTooltip
Returns:
Type
Core

size( [size])

If size is specified, sets the size range and it direction and returns the instance itself. Each chart type apply size settings differently. If size is not specified, returns the instance's current transition and use the default size setting.
Parameters:
Name Type Argument Description
size number | object | Array.<Object> <optional>
Inherited From:
Source:
Returns:
Type
size | Core
Example
line.size(20) // set point radius of a line chart to 20 pixel
scatter.size(10) // set point radius of a scatter chart to 10 pixel
scatter.size([10, 100]) // set the range of point radius of a scatter chart from 10 to 100 pixel
pie.size([20, 100]) // set the inner radius to 20 and the outer radius to 100 seperately
treemap.size({range: [600, 400]}) // set the width to 600 and the height to 400 pixel of a treemap

stream( [stream])

If stream is an object or an array of objects, appends the stream to existing data. If stream is specified, during re-rendering, it will keeps the domain interval limited by viewInterval. When re-renders chart, should use .render(true). If stream is not specified, returns the existing stream.
Parameters:
Name Type Argument Default Description
stream object | Array.<Object> <optional>
 null
Inherited From:
Source:
Returns:
Type
zoom | ZoomMixin
Example
stream.stream({category:'A', sales: 100})
 .render(true);

stream.stream([
 {category: 'D', sales: 100}, 
 {category: 'E', sales: 200}
]).render(true);

tooltip( [tooltip])

If tooltip is specified, decides to show a tooltip in the chart by it value. If is false, prevent showing the tooltip. If tooltip is not specified, returns the instance's current tooltip setting.
Parameters:
Name Type Argument Default Description
tooltip boolean | object <optional>
 true
Inherited From:
Source:
Returns:
Type
tooltip | Core
Example
core.tooltip(true); //set to show a tooltip
core.tooltip({sortByValue:'ascending'}); // set to show a tooltip and sort items in order of their measrue values.

transition( [transition])

If transition is specified, sets the transition duration and delay to the specified object and returns the instance itself. If transition is not specified, returns the instance's current transition.
Parameters:
Name Type Argument Description
transition object <optional>
Properties
Name Type Default Description
duration number 600 transition duration in milliseconds
delay number 20 trnasition delay in millisecends
Inherited From:
Source:
Returns:
Type
transition | Core
Example
core.transition({duration: 1000}); //sets the transition duration to 1000 milliseconds, then returns core itself;
core.transition(); //returns the current transition object;

viewInterval( [unit] [, multiple])

If unit is number or string, limit the key domain's length or distance within the interval. If the key domain's scale is ordnial, the length of domain will be the same to unit. Also, if the scale is continous, the distance of domain will be fixed as much as unit. If unit is string, it must be a time interval. When multiple exists, it will multiply the unit. If unit is not specified, returns the existing viewInterval.
Parameters:
Name Type Argument Default Description
unit number | string <optional>
 null
multiple number <optional>
 1
Inherited From:
Source:
Returns:
Type
zoom | ZoomMixin
Example
stream.viewInterval(1000)
stream.viewInterval('month', 3)

width( [width])

If width is specified, sets width of the container and returns the instance itself. The unit of width is a pixel. If width is not specified, returns the instance's current width.
Parameters:
Name Type Argument Default Description
width number <optional>
 640 width of the container
Inherited From:
Source:
Returns:
Type
width | Core
Example
core.width(600); //sets a custom width;
core.width(); //returns the current width;

zoom( [zoom])

If zoom is string, selects a zoom type. If zoom is true, use the normal zoom type. If zoom is not specified, renders the current zoom Setting.
Parameters:
Name Type Argument Default Description
zoom boolean | string <optional>
 false
Inherited From:
Source:
Returns:
Type
zoom | ZoomMixin
Example
zoomMixin.zoom(true) // selects normal zoom type
zoomMixin.zoom(false) // disable the zoom feature.
zoomMixin.zoom('brush') // selects brushable zoom type.