Skip to main content
Using Deno in production at your company? Earn free Deno merch.
Give us feedback
Module

x/fresh_charts/deps.ts>ChartJs.CoreChartOptions

A server-side-rendered charting library for Fresh
denoland/fresh_charts
Go to Latest
interface ChartJs.CoreChartOptions
import { type ChartJs } from "https://deno.land/x/fresh_charts@0.3.0/deps.ts";
const { CoreChartOptions } = ChartJs;

Properties

datasets: [key in ChartType]: ChartTypeRegistry[key]["datasetOptions"]
indexAxis: "x" | "y"

The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts.

clip: number | ChartArea | false

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

backgroundColor: Scriptable<Color, ScriptableContext<TType>>

base background color

borderColor: Scriptable<Color, ScriptableContext<TType>>

base border color

font: Partial<FontSpec>

base font

responsive: boolean

Resizes the chart canvas when its container does (important note...).

maintainAspectRatio: boolean

Maintain the original canvas aspect ratio (width / height) when resizing.

resizeDelay: number

Delay the resize update by give amount of milliseconds. This can ease the resize process by debouncing update of the elements.

aspectRatio: number

Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.

locale: string

Locale used for number formatting (using Intl.NumberFormat).

devicePixelRatio: number

Override the window's default devicePixelRatio.

events: (keyof HTMLElementEventMap)[]

The events option defines the browser events that the chart should listen to for tooltips and hovering.

layout: Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<TType>>; }>

Methods

onResize(chart: Chart, size: { width: number; height: number; }): void

Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.

onHover(
event: ChartEvent,
elements: ActiveElement[],
chart: Chart,
): void

Called when any of the events fire. Passed the event, an array of active elements (bars, points, etc), and the chart.

onClick(
event: ChartEvent,
elements: ActiveElement[],
chart: Chart,
): void

Called if the event is of type 'mouseup' or 'click'. Passed the event, an array of active elements, and the chart.