You are here
API
ElyCharts API
...
root
template
The name of an option set you want to merge with the one you are defining.
Can be recursive (a template can use another template).
You can define a new template by adding the option set to $.elycharts.template structure.
Example:
$.elycharts.template['name'] = {
...
}
values
An array of values for each serie you want to visualize.
Each serie should have the same number of values, and that should be the same of label count (if labels are specified).
Example:
values : {
serie1: [1, 2, 3, 4],
serie2: [5, 6, 7, 8],
}
labels
The labels associated with each value index.
The number of labels should be the same of each values array, defined for each serie.
In line chart this information is used to fill X axis of the chart.
Other chart types manage this data with labelManager feature.
Example:
labels : [ "one", "two", "three", "four" ],
values : {
serie1: [1, 2, 3, 4],
serie2: [5, 6, 7, 8],
}
tooltips
The tooltip text of each value defined in values settings.
Tooltip is usually associated with the single value of each serie, and is shown when mouse cursor is over the value area of the chart (this area is different for each chart type).
So in standard configuration tooltip is a structure similar to values, an object with an array of text for each serie.
Example:
values : {
serie1: [1, 2, 3, 4],
serie2: [5, 6, 7, 8],
},
tooltips : {
serie1: ['a', 'b', 'c', 'd'],
serie2: ['a', 'b', 'c', 'd'],
}
If features.mousearea.type is set to "index", tooltips setting will be different: you should specify only an array of texts, one entry for each serie index (like labels).
Example:
features : {
mousearea : {
type : 'index'
}
},
values : {
serie1: [1, 2, 3, 4],
serie2: [5, 6, 7, 8],
},
tooltips : ['a', 'b', 'c', 'd']
Tooltip can also be a function. This is interpreted as a callback thrown each time mouse pointer moves on a value. The return value will be the tooltip text shown. The function is called with parameters (serieId, valueIndex, allValues, singleValue).
plotProps on a line chart
Value: ' + singleValue; } }
width
Force the width in pixel of the chart.
If not specified chart will use container dimensions.
height
Force the height in pixel of the chart.
If not specified chart will use container dimensions.
margins
Set the distance between the chart boundaries and the container borders.
Chart boundaries are intended only for the area that contains series values. For line charts this is the area that contains the grid.
Elements such as labels, titles, legend are outside the boundaries: so margins should be used to have the space to display them.
If margins are too low, labels and titles will be hidden or truncated.
barMargins
Distance between each bar group.
Number of units to skip between an index of data and the next one, when showing bar serie.
style
Apply this CSS Stylesheet to HTML container.
This is the same of setting style attribute or CSS selector to HTML element containing the chart.
interactive
Allow to disable all interactive parts of the chart (like tooltips, highlights...).
Setting this parameter to false force the chart to skip the generation of layer used for mouse detection.
Code generated will be lighter, and no features that need mouse detection will work.
You can disable this for old browser not fully supporting advanced interactions, or to produce simpler page code.
defaultSeries
An object containing the settings that should be used as defaults for each serie.
Setting an option here is like setting it in every serie element specified (ie: this object is merged with every serie object).
So, a chart defined like this:
{
values : { serie1 : [1, 2], serie2 : [3, 4} },
defaultSeries : { color: 'blue' }
}
is equal to this chart:
{
values : { serie1 : [1, 2], serie2 : [3, 4} },
series : {
serie1 : { color: 'blue' },
serie2 : { color: 'blue' }
}
}
series
Contains specific settings for each serie.
Each element is a serie setting object, associated with the serie name
Special key "empty" is used to specify settings for an empty serie (only for empty pie charts)
Example:
series : {
serie1: {
color: "blue",
},
empty : {
color: "white",
label : { active : false },
tooltip : { active : false }
}
}
boolean
string
values
numeric
svg_attributes
color
serie_settings
color
Quick specify the color of the serie.
You can use this option to easily set all color-related options of the serie: plotProps.stroke, plotProps.fill, dotProps.stroke, fillProps.fill...
Exact behaviour is different for various chart and series type.
plotProps
The set of SVG attributes used to display main plot.
You can specify here how the data should be visualized: colors, stroke dimensions, opacity...
The target of the properties changes for different chart types: in line serie they are about the main line, in bar chart these are properties of the rectangles...