Appearance
ScatterChart
Prop ControlsSHOW
Props
| name | type | default | required | description |
|---|---|---|---|---|
| absoluteScale | boolean | false | ☐ | When true, will force including 0 in both domains |
| dataSets | DataSet[] | [] | ☐ | The datasets to plot, they will be drawn in order one on top of the other "lowest" (first) to "highest" (last) |
| drawBars | boolean | false | ☐ | Draw bar-chart bars from bottom to data points |
| drawCurve | boolean | false | ☐ | Draw a catmull-rom curve throught the provided points |
| drawLegend | boolean | false | ☐ | Draws a legend with togglable data |
| drawPoints | boolean | false | ☐ | Draw unconnected data points |
| drawToolTips | boolean | false | ☐ | Show tooltip info when the mouse is near a point |
| drawXAxis | boolean | false | ☐ | Draws a simple linear X Axis |
| drawYAxis | boolean | false | ☐ | Draws a simple linear Y Axis |
| enablePan | boolean | false | ☐ | Draw a catmull-rom curve throught the provided points |
| enableZoom | boolean | false | ☐ | Draw a catmull-rom curve throught the provided points |
| mouseTrackingIgnoreX | boolean | false | ☐ | When true, mouse over queries will ignore X axis values |
| mouseTrackingIgnoreY | boolean | false | ☐ | When true, mouse over queries will ignore Y axis values |
| subTicksX | number | 0 | ☐ | How many unlabelled ticks to draw between each pair of labelled ticks on the X Axis |
| subTicksY | number | 0 | ☐ | How many unlabelled ticks to draw between each pair of labelled ticks on the X Axis |
| tickFrequencyX | string | "0" | ☐ | Sets density of ticks using 1-tick per distance where this prop controls the distance. |
NOTE: you can set any valid css length here as a string such as 10px, 0.5em, or 30vh.| |tickFrequencyY|string|"0"|☐|Sets density of ticks using 1-tick per distance where this prop controls the distance.
NOTE: you can set any valid css length here as a string such as 10px, 0.5em, or 30vh.| |title|string|null|☐|The title of this graph, leave undefined to omit|
Slots
background
Contains the plot background and both axes.
| prop | type | comment |
|---|---|---|
domState | DOMState | the wrapping DDV component's DOMState |
margins | Margins | the wrapping DDV component's margins |
xScaler | LinearScaler | returns the x pixel for a given data point's x value |
yScaler | LinearScaler | returns the y pixel for a given data point's y value |
toolTipInfo | ToolTipInfo | The same info sent to tooltips, contains nearest point in both screen/data space as well as distance from the cursor and original index of the point in the dataset's points |
perSeries
This slot will be called once for each props.dataSets. This is a good slot to draw points or lines, as it will have everything you need to properly place interpolated items for each DataSet.
| prop | type | comment |
|---|---|---|
domState | DOMState | the wrapping DDV component's DOMState |
margins | Margins | the wrapping DDV component's Margins |
mouseState | MouseState | the wrapping DDV component's MouseState |
screenPoints | Point[] | all points (after decimation) in screen space |
nearestPoint | NearestPoint | null | all points (after decimation) in screen space |
xScaler | LinearScaler | returns the x pixel for a given data point's x value |
yScaler | LinearScaler | returns the y pixel for a given data point's y value |
inactiveDataSets | Array<number> | an array of dataSet indexes that have been disabled by the user |
dataSeriesNumber | number | this sets the CSS var of the active plot |
aggregateXDomain | Domain | the min/max for all x's all datasets |
aggregateYDomain | Domain | the min/max for all y's all datasets |
legend
This slot expects to draw the legend for the chart when props.drawLegend is true. By default it will draw a ChartLegend
| prop | type | comment |
|---|---|---|
toolTipInfo | ToolTipInfo | The same info sent to tooltips, contains nearest point in both screen/data space as well as distance from the cursor and original index of the point in the dataset's points |
domState | DOMState | the wrapping DDV component's DOMState |
margins | Margins | the wrapping DDV component's Margins |
mouseState | MouseState | the wrapping DDV component's MouseState |
activateSeries | (dataSeriesNumber:number) => void | a function that activates a series by dataSets index |
deactivateSeries | (dataSeriesNumber:number) => void | a function that deactivates a series by dataSets index |
inactiveDataSets | Array<number> | an array of dataSet indexes that have been disabled by the user |
dataSets | DataSet[] | The processed data sets from the SeriesReducer |
title
When props.title is set, will draw a ChartTitle by default.
| prop | type | comment |
|---|---|---|
title | string | the chart's title |
domState | DOMState | the wrapping DDV component's DOMState |
margins | Margins | the wrapping DDV component's Margins |
crosshairs
Draws lines and other indicators based on live updating mouse movements
| prop | type | comment |
|---|---|---|
domState | DOMState | the wrapping DDV component's DOMState |
margins | Margins | the wrapping DDV component's Margins |
tooltip
Draws lines and other indicators based on live updating mouse movements
| prop | type | comment |
|---|---|---|
chartId | string | Internal ID generated by the DDV component |
toolTipInfo | ToolTipInfo | The same info sent to tooltips, contains nearest point in both screen/data space as well as distance from the cursor and original index of the point in the dataset's points |
Emitted Events
None