will always have a class name of pxc_tt_overlay (short for "pixl-chart tooltip overlay"). The element is always empty, but is sized and positioned precisely atop the chart. You can use this to render your own hover HTML elements which appear and disappear based on the mouse hover state. Example:

`js
chart.on('mouseover', function(event) {
// show our own hover components
document.querySelector('.pxc_tt_overlay').innerHTML = '

';
});
chart.on('mouseout', function(event) {
// mouse has left the chart
// no action required
});
`

Note that you don't have to do anything on mouseout, because the .pxc_tt_overlay element is automatically destroyed.

One possible use here is to render your own "toolbar" with clickable buttons (e.g. snapshot, download, etc.), which appear when the mouse hovers over your chart, and disappear when the mouse leaves.

Flatten Layers

If your chart has multiple layers, but you want to offer your users a way to temporarily "flatten" all the layers in to a single combo display layer (for e.g. to show the average, min, max or total), set a new flatten object property on your chart. It accepts the following properties:

| Property Name | Default Value | Description |
|---------------|---------------|-------------|
| type | average | This specifies how to merge the data values. Supported algorithms are average, minimum, maximum and total. |
| title | n/a | Optionally override the entire chart title while flatten mode is active. |
| tooltipTitle | n/a | Optionally override the layer title inside hover tooltips. This defaults to the chart title. |
| prefixTitle | n/a | Optionally prepend a prefix onto the chart title when flatten mode is active. |
| color | (Color 0) | Customize the color of the combined flattened layer. This defaults to the first color in the default colors list. |
| fill | 0.5 | Optionally customize the fill of the combo flattened layer. This defaults to 0.5 (half opacity). |

So the idea is, after some user interaction (i.e. they select a flatten mode in a drop-down menu) populate the flatten object on your chart, and then call update() to schedule a rerender. Here is an example:

`js
chart.flatten = {
type: 'average',
tooltipTitle: 'Average',
prefixTitle: 'Average'
};
chart.update();
`

This would enable flatten mode, which will collapse all your layers into one (non-destructively), and merge the data together by averaging all the layer values together. It will also set a custom tooltipTitle set to "Average", as well as a prefixTitle set to the same string.

To revert back to the standard multi-layer view, simply remove the flatten object (or set it to null) and call update() again:

`js
chart.flatten = null;
chart.update();
`

See the Flatten Layers Demo for an example use case.

Configuration

You pass in configuration options by specifying them as properties of the object you pass to the Chart class constructor. Also, in many cases you can just set them directly on your Chart instance.

Here are all the configuration properties you can set, in alphabetical order:

$3

| Type | Default |
|------|---------|
| Boolean | true |

This causes the chart to automatically add "headroom" above the highest Y value, typically ending it on a round number. This makes the charts more pleasing to the eye in most cases. See Headroom for more details.

$3

| Type | Default |
|------|---------|
| Boolean | true |

This causes the chart to automatically be managed by the global chart manager. This automatically monitors offscreen charts and renders them as they scroll into view. It is also the basis behind the auto-resize system. See Chart Management for more details.

$3

| Type | Default |
|------|---------|
| Boolean | true |

This feature allows the chart to automatically redraw itself when the underlying element changes size. Note that in order for this to work, autoManage also needs to be enabled. See Auto Resizing for more details.

$3

| Type | Default |
|------|---------|
| String | "" |

By default, pixl-chart uses a transparent background. This is important so that charts look nice on both light and dark themes. However, you can override this if you want, and set the background property to any CSS color string.

$3

| Type | Default |
|------|---------|
| String | rgba(128, 128, 128, 0.25) |

This sets the horizontal and vertical tick line color. It can be any CSS color string, and alpha transparency is supported. The default is gray at 25% opacity, which works well in both light and dark themes.

$3

| Type | Default |
|------|---------|
| Mixed | null |

(Required) Attach an HTML5 element to the chart, for rendering everything into. The canvas element should already be in the DOM at construction time. You can pass in a direct reference to the DOM object itself, or a CSS query selector string.

$3

| Type | Default |
|------|---------|
| Boolean | false |

Optionally clip the data drawing to the viewable area. This is disabled by default for performance reasons, but also because datasets almost always fit into the bounds with no clipping necessary. This property only comes into play when you artificially zoom in (see Zooming), in which case clipping becomes necessary.

$3

| Type | Default |
|------|---------|
| Array | ["#008FFB", ...] |

This is a list of default colors to assign to new layers, if they do not include their own. pixl-chart ships with a set of 50 colors, which repeats if more than 50 layers are added. Feel free to override this with your own color palette. Each color should be a string in hexadecimal (#RRGGBB), RGB (rgb(R,G,B)), RGBA(rgba(R,G,B,A)), HSL (hsl(H,S,L)), or HSLA(hsla(H,S,L,A)) format.

$3

| Type | Default |
|------|---------|
| String | crosshair |

This sets the visible cursor when the mouse hovers over the graph. It defaults to the crosshair cursor. See the MDN cursor docs for all possible values here.

$3

| Type | Default |
|------|---------|
| String | data:image/png;base64,... |

When showDataGaps is enabled, this sets the image pattern to draw the missing regions on the graph. It defaults to a gray striped bar pattern. The image should be a repeating pattern that seamlessly loops in all directions. Feel free to replace this with your own image, which can be a local embedded data: URL, or a remote http: or https: URL.

$3

| Type | Default |
|------|---------|
| String | "" |

Optionally display a suffix after all your data values in the chart. This affects both the Y-axis sidebar on the left, and inside the hover tooltip. Typical suffixes include /sec for when your data is sampled per second, and ms for measuring milliseconds.

$3

| Type | Default |
|------|---------|
| String | integer |

(Required) Define the type of data you are displaying in the chart. This controls how the numbers are displayed to the user. The default value is integer. Possible values include:

#### integer

Setting dataType to integer means that your graph should display whole numbers. The numbers will also be localized to the user viewing the chart, e.g. 1,000,000 for US.

Additionally, integers will be abbreviated in the Y-axis sidebar, to conserve horizontal space. Specifically, values over 10,000 will be displayed as "10K", "20K", "500K", etc. Values over 1,000,000 will be displayed as "1M", "20M", "500M", etc. Values over 1,000,000,000 will be displayed as "1B", "20B", "500B", etc.

#### float

Setting dataType to float means that your graph should display floating point decimals. The precision of these numbers is reduced for brevity, according to the floatPrecision setting, of which the default is 2 numbers after the decimal point.

#### bytes

Setting dataType to bytes means that your graph should display byte values. These values are reduced for brevity, using a 1024-byte kilobyte, according to this table:

| Range | Display Examples |
|-------|------------------|
| < 1024 | "1 B", "20 B", "500 B" |
| >= 1024 | "1 K", "20 K", "500 K" |
| >= 1048576 | "1 MB", "20 MB", "500 MB" |
| >= 1073741824 | "1 GB", "20 GB", "500 GB" |
| >= 1099511627776 | "1 TB", "20 TB", "500 TB" |

Furthermore, these values may include floating point decimals according to your floatPrecision setting, if the value doesn't divide evenly.

If you are displaying a graph that prefers non-binary divisions, e.g. 1K = 1000, then please set your dataType to integer.

#### seconds

Setting dataType to seconds means that your graph should display time-based data values (i.e. elapsed time in seconds) for the Y axis. The labels will be quantized based on their range, e.g. seconds, minutes, hours and/or days, with varying degrees of accuracy for display purposes.

#### milliseconds

Setting dataType to milliseconds means that your graph should display time-based data values (i.e. elapsed time in milliseconds) for the Y axis. The labels will be quantized based on their range, e.g. milliseconds (if under one second), then seconds, minutes, hours and/or days, with varying degrees of accuracy for display purposes.

$3

For fine-grained control over dates/times displayed in the axis labels and tooltips, you can specify your own custom dateStyles object. The default configuration is shown below:

`js
chart.dateStyles = {
minute: {
hour: 'numeric',
hour12: false,
minute: '2-digit',
second: '2-digit'
},
hour: {
hour: 'numeric',
hour12: true,
minute: '2-digit'
},
day: {
hour: 'numeric',
hour12: true
},
month: {
month: 'short',
day: 'numeric'
},
year: {
month: 'short',
day: 'numeric'
},
tooltip: {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
hour12: true,
minute: '2-digit'
}
};
`

This controls how to compose dates/times in each of the different "zoom levels" of the chart (based on the horizontal date range). For example, if the total range of the chart is a minute or less, then the minute configuration is used. If less than an hour, the hour one is used, and so on. The tooltip object is used for dates/times inside of tooltips.

The properties in each of these objects are passed directly to the Intl.DateTimeFormat API.

$3

| Type | Default |
|------|---------|
| Boolean | false |

This controls the interpretation of the vertical graph layer data. When this is set to true, each y (vertical) value will be rendered as an offset from the previous value, rather than an absolute. This is useful for datasets which contain counters (accumulating values over time), and you want to show the deltas between them.

$3

| Type | Default |
|------|---------|
| Mixed | false |

When delta mode is enabled, setting deltaMinValue to a number (e.g. 0) will clamp all computed delta values to the provided mininum. This is useful for graphing the delta of absolute "counters" that should always count upwards. For example, measuring the absolute value of network or disk read/write counters usually gives you an absolute counter of the bytes since last reboot.

$3

| Type | Default |
|------|---------|
| Boolean | false |

When delta mode is enabled, setting divideByDelta to true will divide every y (vertical) value by the delta between the current x (time) and previous x (time) entry in the dataset. This is for graphs that need to display "per second" values (often with a dataSuffix set to "/sec"), which will be accurate regardless of zoom level.

$3

| Type | Default |
|------|---------|
| Number | (Auto-detect) |

This is the pixel density to use when rendering the chart canvas. A value of 1 is for standard screens, and 2 is for most "retina" a.k.a. "HiDPI" screens (e.g. iPhones, iPads, MacBook Pros). The default value is auto-detected, which is pulled from window.devicePixelRatio.

This does not affect the physical size of the canvas on the page -- it only affects how tightly the pixels are packed together. It will, however, affect the resolution and size of downloaded images (see Snapshots).

If you set this to a fixed value and it doesn't match the user's screen density, the canvas will be scaled to fit.

$3

| Type | Default |
|------|---------|
| String | "" |

When there is no data to show (empty datasets or no visible layers) you can use this property to display a custom text message, centered in the middle of the chart. An example could be "Waiting for data...", or "No data to show.".

$3

| Type | Default |
|------|---------|
| Number | 0.5 |

This controls the fill opacity for your dataset rendering. The default is 0.5 which is half-transparent. If your chart has multiple layers, it is generally a good idea to set this to 0 (or false) to disable the fill entirely, and only render lines (see stroke).

You can override fill on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| Object | null |

This is used for flattening all layers into a single combined display layer, using a variety of algorithms (avg, min, max, total). See Flatten Layers for details.

$3

| Type | Default |
|------|---------|
| Number | 2 |

For displaying floating point numbers in your data values, this sets the maximum number of digits to allow after the decimal point. This only affects specific chart dataTypes, namely float and bytes.

$3

| Type | Default |
|------|---------|
| String | rgb(128, 128, 128) |

This controls the font color for virtually all the text rendered in the chart, from the title, to the axis labels, to the hover tooltip. The only thing this doesn't control is data label text color (see Data Labels).

The default font color is neutral gray, so it looks nice on both light and dark themes.

$3

| Type | Default |
|------|---------|
| String | Helvetica, sans-serif |

This controls the font family for all text rendered in the graph. Set it to any CSS font family, with optional comma-separated fallbacks. If you intend to use custom web fonts, make sure they are fully loaded before rendering your charts. You can use a library such as onFontReady for this.

$3

| Type | Default |
|------|---------|
| Number | 12 |

This sets the font size (in pixels) for all text displayed in the chart (except for the title, which is set by titleSize).

$3

| Type | Default |
|------|---------|
| Number | (Auto) |

Optionally set a fixed height for the chart, in pixels. The default behavior is to use whatever DOM size is computed for the element.

Note that if you specify a fixed height, you must also include a width.

$3

| Type | Default |
|------|---------|
| Number | 25 |

This is the number of pixels set aside for padding below the horizontal axis labels (i.e. timestamp labels), and above the legend.

$3

| Type | Default |
|------|---------|
| Number | 6 |

This is the number of horizontal "ticks" (grid lines and labels) for the X axis and timestamps. Beware of increasing this too far, as the labels may run into each other. Also note that the library will auto-reduce this number for extremely small charts (i.e. for mobile screens). The algorithm is: Math.min( horizTicks, Math.ceil(width / 100) ). This effectively prevents most labels from colliding.

$3

| Type | Default |
|------|---------|
| Boolean | true |

This enables the mouse hover and tooltip system. When the mouse hovers over the data area, a vertical dotted bar is rendered, highlighting the closest data point. Additionally, colored dots are positioned on each of the layer data points. Finally, a hovering tooltip is floated nearby, with the exact values of each of the data points.

$3

| Type | Default |
|------|---------|
| Number | 0 |

Inside the hover tooltip box, each layer is displayed along with its data value for the closest timestamp. By default, the layers are presented in their natural order from top to bottom (the order in which they were added), but you can also sort by the data values themselves, ascending or descending. Here are the three accepted hoverSort settings:

| hoverSort | Description |
|-----------|-------------|
| 0 | Do not sort (the layers will be in their natural order). |
| 1 | Sort the layers by the data values in ascending order. |
| -1 | Sort the layers by the data values in descending order. |

$3

| Type | Default |
|------|---------|
| Number | 20 |

Specify the maximum number of layers to display in the hover tooltip box. If your chart has more layers than the maximum, the list is chopped from the center. This is so the user can see the topmost and bottommost layers. This is most effective when combined with hoverSort, so the user can see the layers with the highest and lowest values.

$3

| Type | Default |
|------|---------|
| Array | [] |

You can optionally specify your layer data when you first construct the chart, by including a layers array. See Adding Layers for details.

$3

| Type | Default |
|------|---------|
| Boolean | true |

This controls whether the chart legend is displayed or not. The default is true. Note that the decision to show or hide the legend is also affected by legendMaxLines.

$3

| Type | Default |
|------|---------|
| Number | 2 |

This is the maximum number of lines to allow in the legend, before it is automatically hidden. The idea here is that if your graph has too many layers, or if the layer titles are too long, the legend won't eat up too much of the canvas space.

$3

| Type | Default |
|------|---------|
| Number | 5 |

This is the amount of padding to allocate underneath the legend, in pixels. This only takes effect if the legend is actually displayed.

$3

| Type | Default |
|------|---------|
| String | butt |

This determines the shape used to draw the end points of lines, assuming stroke is enabled. See lineCap at MDN for more details.

You can override lineCap on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| Mixed | false |

By default, all lines in the chart are solid. To render dashed lines, provide a custom dash pattern in the lineDashes property using an array. Specify pixel widths of each segment in your repeating pattern, which alternate between the solid segment and the gap. Example use:

`js
{
"lineDashes": [4, 2]
}
`

This would produce a pattern of a 4-pixel-wide solid segment, followed by a 2-pixel-wide gap, and then repeat. See setLineDash at MDN for more details.

You can override lineDashes on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| String | round |

This determines the shape used to join two line segments where they meet. The default is round. See lineJoin at MDN for more details.

You can override lineJoin on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| Number | 2 |

This controls the width of the lines rendered in your chart, in pixels. If you have a large dataset with complex patterns, you might want to set this to 1.

You can override lineWidth on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| Boolean | false |

If your chart is going to be receiving streaming live data, setting this property to true allows the library to prepare for certain optimizations that may help the user experience. Currently this mode affects flattened datasets, hiding the first and/or last sample if they are "partial".

$3

| Type | Default |
|------|---------|
| String | (Auto-detect) |

This is the locale used for formatting dates and times, e.g. en-US. The locale determine how dates are formatted in terms of month names, abbreviations, suffixes, and symbols used. See the list of language codes on Wikipedia for a full list of these.

$3

| Type | Default |
|------|---------|
| Number | (Unset) |

Use this to prevent the horizontal "scale" (the distance between the left and right visible data points) from rendering below a minimum value. For example, set this to 60 to set the minimum time tange to 1 minute. This only affects how the data is scaled and rendered into the canvas. For more fine-grained control, see zoom.

$3

| Type | Default |
|------|---------|
| Number | (Unset) |

Use this to prevent the vertical "scale" (the distance between the highest and lowest visible data points) from rendering below a minimum value. For example, if this is set to 100 and all the data samples are below that value, the topmost level in the chart will still be at the 100 mark. This only affects how the data is scaled and rendered into the canvas. For more fine-grained control, see zoom.

$3

| Type | Default |
|------|---------|
| Object | { left:0, top:0, right:10, bottom:0 } |

This object allows you to add extra padding on any side of the chart. Note that the top, left and bottom sides are already pre-padded by the title, vertical labels and legend, respectively. So by default this object only adds a bit of padding on the right side, to balance things out.

$3

| Type | Default |
|------|---------|
| Boolean | false |

By default, the entire chart is rendered all at once. Meaning, everything is rendered in the same "frame". This is usually fine for most charts. However, in rare cases when you have a huge amount of complex layers with large datasets, you may want to render the chart "progressively". That is, when this property is set to true, the chart will only render one layer at a time, and wait an animation frame between each one. This allows you to render enormously complex charts without "hanging" the browser for too long.

Please use this feature with caution. It does not play nice with Auto Resizing, for example. It should be used for fixed size charts only.

$3

| Type | Default |
|------|---------|
| Boolean | false |

Set this property to true to reduce certain animations for accessibility purposes. Currently this affects the motion of the tooltip window, focus line and data dots.

$3

| Type | Default |
|------|---------|
| Boolean | false |

If your data has time gaps, pixl-chart can detect these and highlight them using a visual pattern. A "gap" is defined as a space between two data samples that is larger than the smallest space between all your other samples. This feature is designed for datasets that have regular spaces between timestamps (i.e. every minute, every hour, etc.). It defaults to disabled. Set the showDataGaps property to true to enable it. See the Data Gaps Demo for an example of this feature.

If you want to customize the image pattern displayed for gaps, see dataGapImage.

$3

| Type | Default |
|------|---------|
| Boolean | true |

This controls whether the subtitle is displayed or not. By default, the subtitle will contain the date/time range of your dataset, but you can override this and supply your own subtitle by setting the subtitle property. Set showSubtitle to false to hide the subtitle entirely.

$3

| Type | Default |
|------|---------|
| Boolean | true |

By default, your graph data lines are smoothed using monotone cubic interpolation. If you set smoothing to false, the lines will instead be rendered using straight linear interpolation. Also see smoothingMaxSamples, which can disable smoothing.

You can override smoothing on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| Number | 200 |

If smoothing is set to true, but your dataset has more than this number of samples per layer (default 200), smoothing is disabled. This rule is evaluated on a layer-by-layer basis.

The idea here is that at at certain point, smoothing can't really be seen because there are so many data samples in the chart. Also, smoothing can cause performance issues with larger datasets, so it is a good idea to disable it in those cases.

$3

| Type | Default |
|------|---------|
| Number | 1000 |

If smoothing is set to true, but your dataset has more than this number of total samples across all layers, smoothing is disabled. This rule is evaluated globally, not per layer. This is another performance tuning mechanism, designed to reduce lag on datasets with a large number of layers.

$3

| Type | Default |
|------|---------|
| Boolean | true |

The stroke property controls whether lines are rendered for your data or not. This defaults to true. One style option is to set this to false, then set fill to some non-zero opacity, to get a pure area fill without an outline. See the Custom Fill Styles Demo for an example of this.

You can override stroke on a layer-by-layer basis. See Layer Properties for details.

$3

| Type | Default |
|------|---------|
| String | (Automatic) |

When showSubtitle is set to true, the default behavior is to display the date/time range as the subtitle (automatically constructed based on your data). However, you can customize this if you want, by setting the subtitle property to any string value.

Please note that the subtitle is only displayed if title is also set. They come as a pair.

$3

| Type | Default |
|------|---------|
| String | (Auto-detect) |

When displaying dates and times, pixl-chart will use your current time zone (auto-detected). You can override this, however, by setting the timeZone property to any standard time zone name, e.g. America/Los_Angeles. For the full list of available time zones, see the list of time zones on Wikipedia.

Also see the locale property, which affects date/time formatting.

$3

| Type | Default |
|------|---------|
| String | "" |

If you would like your graph to have a title, specify it using the title property. This will be displayed prominently at the top of the chart, center aligned. See also titleSize, titleStyle and titlePadding.

$3

| Type | Default |
|------|---------|
| Number | 15 |

This is the number of pixels to pad around the title (above and below), if one is specified. By default this is 15 pixels.

$3

| Type | Default |
|------|---------|
| Number | 16 |

If a title is specified, it will be rendered at this pixel size. By default this is 16 pixels.

$3

| Type | Default |
|------|---------|
| String | bold |

If a title is specified, it will be displayed using this font style. By default this is bold.

$3

| Type | Default |
|------|---------|
| String | "" |

Optionally customize the font color of the graph title. If omitted, this defaults to the value of fontColor.

$3

| Type | Default |
|------|---------|
| Number | 10 |

This is the number of pixels to pad around the vertical labels (on both the left and right sides). The default is 10 pixels. The vertical labels are those that run along the left side of the chart, which appear for each vertical tick.

$3

| Type | Default |
|------|---------|
| String | left |

This specifies which side to render the vertical (Y axis) labels on. Specify via left or right. The default is left.

Note that if you change this to the right side, you should also adjust the padding. It is recommended that you swap the values of padding.left and padding.right, to compensate for the labels switching sides. For example, the default padding is 0 pixels on the left (because the labels are there) and 10 pixels on the right (because nothing is there). So if you want right-side labels, then you should set padding.left to 10 and padding.right to 0. See the Label Sides Demo for an example.

$3

| Type | Default |
|------|---------|
| Number | 6 |

This is the number of vertical "ticks" (grid lines and labels) for the Y axis. They run along the left side of the chart. Beware of increasing this too far, as the labels may run into each other.

$3

| Type | Default |
|------|---------|
| Number | 0 |

Optionally set a fixed width for the chart, in pixels. The default behavior is to use whatever DOM size is computed for the element.

Note that if you specify a fixed width, you must also include a height.

$3

| Type | Default |
|------|---------|
| Boolean | true |

By default, pixl-chart will "zero" the chart at the bottom edge. Meaning, the bottom of the chart is always considered Y value 0, regardless of your data's range. If you set zeroFloor to false, then your data will dictate the lowest Y value, and the chart will adjust itself.

$3

| Type | Default |
|------|---------|
| Object | null |

Use the optional zoom property to artificially "zoom in" your dataset. If specified, zoom should be an object with xMin, xMax, yMin and yMax properties. See Zooming for details on how to use this.

API

Here are the available methods you can call on your Chart instance.

$3

`
VOID addLayer( OBJECT )
`

The addLayer() method adds a layer to the chart. This can be called at any time, even after a chart is rendered (this will trigger a follow-up render). See Adding Layers for details on how to format your layer object.

$3

`
VOID addLayers( ARRAY )
`

The addLayers() method adds multiple layers to the chart at once. This can be called at any time, even after a chart is rendered (this will trigger a follow-up render). See Adding Layers for details on how to format your layer data.

$3

`
VOID addLayerSample( INDEX, OBJECT, MAX )
`

The addLayerSample() method appends a single data sample to the layer specified by its index number. While you can manually manipulate the layer.data array, this method properly massages the new values in the same way as addLayer(). For e.g. this converts the date if needed, prepares samples for delta mode, applies offsets, and so on. It will also mark the chart as "dirty" so it redraws on the next frame. Example:

`js
chart.addLayerSample( 0, { x:1739679710, y:45 }, 60 );
`

This would append the sample to the first layer (0), and apply a max of 60 samples. So if this is the 61st sample in the set, it will automatically drop the first one to shift forward in time.

$3

`
VOID render()
`

The render() method renders the chart into the attached element. If you have multiple charts on a single page, it is recommended that you use Chart Management instead.

$3

`
VOID update()
`

The update() method tells pixl-chart that the current chart has new or updated data (or changed configuration options), and needs to be re-rendered. This is the "nice" way of updating a chart, versus calling render() directly. See Chart Management for details.

$3

`
VOID snapshot( OPTIONS, CALLBACK )
`

The snapshot() method takes a snapshot of the chart, and produces a flat image (WebP, PNG or JPEG format). You can request a data URL, or a blob, and override other settings as well. See Snapshots for details.

$3

`
VOID download( OPTIONS )
`

The download() method takes a snapshot of the chart, and downloads the image to your local machine. You can specify a number of settings here including format, quality, and override chart settings as well. See Downloads for details.

$3

`
VOID on( NAME, LISTENER )
`

The on() method adds an event listener for a specific event. You need to specify an event name, and a listener function. See Events for details.

$3

`
VOID off( NAME, LISTENER )
`

The off() method removes an event listener from a specific event. You need to specify an event name, and the listener function you previously specified with on(). See Events for details.

$3

`
VOID destroy()
`

The destroy() method completely disposes of the current chart object. It removes the chart from management, removes all DOM listeners, and removes all the references to DOM objects and contexts. It does not erase the chart, or otherwise touch the object; it merely disassociates itself, and frees up all memory it was using.

After calling this the chart object can no longer be used.

Properties

Here are some properties you can access on your Chart instance, once it is initialized:

$3

The dataLimits object is computed based on your dataset on every render cycle, and contains the following properties:

| Property | Description |
|----------|-------------|
| xMin | The lowest X value (timestamp) across your entire dataset. |
| xMax | The highest X value (timestamp) across your entire dataset. |
| yMin | The lowest Y value across your entire dataset (or simply 0 if zeroFloor is enabled). |
| yMax | The highest Y value across your entire dataset (possibly adjusted by autoHeadroom). |
| width | The width of your dataset (xMax - xMin). |
| height | The height of your dataset (yMax - yMin). |

$3

The bounds object is computed once every render cycle, and contains the physical boundaries of the data render area (inset by all padding, titles, axis labels, legend, etc.). The coordinates are in adjusted canvas space, relative to the top-left corner of the canvas, and they are not affected by the screen density. Here are the available properties:

| Property | Description |
|----------|-------------|
| x | The horizontal coordinate of the left side of the bounds rect, in pixels. |
| y | The vertical coordinate of the top side of the bounds rect, in pixels. |
| width | The width of the bounds rect, in pixels. |
| height | The height of the bounds rect, in pixels. |

Events

Here are all the events you can add listeners for using on():

$3

The render event is emitted after rendering is complete. This may be emitted many times, especially if the chart is resized. You could use this event to draw your own elements onto the chart . Example:

`js
chart.on('render', function() {
// draw our own element on the canvas
chart.ctx.fillStyle = 'red';
chart.ctx.fillRect( 50, 50, 100, 100 );
});
`

$3

The mouseover event is emitted when the user's mouse cursor enters the chart. Your event listener will be passed the raw MouseEvent object from the browser. See Hover Overlay for details on how to use this, and other events.

$3

The mousemove` event is emitted wh