Chartjs

data TooltipItem

Opaque type for a Chart.js tooltip item in tooltip callbacks.

type TooltipCallbacks = { footer :: Maybe (EffectFn1 (Array TooltipItem) String), label :: Maybe (EffectFn1 TooltipItem String), title :: Maybe (EffectFn1 (Array TooltipItem) String) }

Tooltip formatting callbacks for label, title, and footer.

type TickCallback = EffectFn3 Foreign Int (Array Foreign) String

Tick formatting callback: (value, index, ticks) -> formatted label

data LegendItem

Opaque type for a Chart.js legend item in legend callbacks.

data Legend

Opaque type for the Chart.js legend object in legend callbacks.

type ComponentInput = { callbacks :: Callbacks, config :: ChartConfig }

Input for the Halogen chart component: a config and optional callbacks.

type Callbacks = { legendOnClick :: Maybe (EffectFn3 Event LegendItem Legend Unit), legendOnHover :: Maybe (EffectFn3 Event LegendItem Legend Unit), legendOnLeave :: Maybe (EffectFn3 Event LegendItem Legend Unit), onClick :: Maybe (EffectFn3 Event (Array ActiveElement) ChartInstance Unit), onHover :: Maybe (EffectFn3 Event (Array ActiveElement) ChartInstance Unit), onResize :: Maybe (EffectFn2 ChartInstance { height :: Number, width :: Number } Unit), tickCallbacks :: Maybe (Object TickCallback), tooltipCallbacks :: Maybe TooltipCallbacks }

Chart.js event callbacks (click, hover, resize, legend, tooltip, ticks).

data ActiveElement

Opaque type for a Chart.js active element in event callbacks.

simpleInput :: ChartConfig -> ComponentInput

Create a ComponentInput from just a ChartConfig (no callbacks).

hasOverlays :: Callbacks -> ChartConfig -> Boolean

Check if there are any overlays that need to be merged (callbacks or non-CSS colors).

hasCallbacks :: Callbacks -> Boolean

Check if any callbacks are set.

defaultTooltipCallbacks :: TooltipCallbacks

All optional fields set to Nothing.

defaultCallbacks :: Callbacks

All optional fields set to Nothing.

callbacksToForeign :: Callbacks -> Foreign

Convert Callbacks to a plain JS object for the FFI merge function.

buildOverlays :: Callbacks -> ChartConfig -> Foreign

Build a combined overlays object with callbacks and dataset color overlays.

type ColorStop = { color :: String, offset :: Number }

A gradient color stop with an offset (0–1) and CSS color string.

indexableColorToForeign :: Indexable Color -> Foreign

Convert an Indexable Color to Foreign.

extractDatasetColorOverlays :: Array Dataset -> Maybe (Array Foreign)

Extract color overlays for all datasets. Returns Nothing if no dataset

createRadialGradient :: HTMLCanvasElement -> { r0 :: Number, r1 :: Number, x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number } -> Array ColorStop -> Effect CanvasGradient

Create a radial gradient on a canvas.

createPattern :: HTMLCanvasElement -> Foreign -> String -> Effect CanvasPattern

Create a pattern on a canvas from an image element.

createLinearGradient :: HTMLCanvasElement -> { x0 :: Number, x1 :: Number, y0 :: Number, y1 :: Number } -> Array ColorStop -> Effect CanvasGradient

Create a linear gradient on a canvas.

colorToForeign :: Color -> Foreign

Convert a Color to a Foreign value for direct JS use.

toChartJsConfig :: ChartConfig -> Json

Convert a ChartConfig to the JSON structure Chart.js expects.

data ChartInstance

Opaque handle to a Chart.js instance.

updateChartWithCallbacks :: ChartInstance -> Json -> Foreign -> Effect Unit

Update a chart with a new JSON config and a callbacks/overlays object.

updateChart :: ChartInstance -> Json -> Effect Unit

Update an existing chart with a new JSON config.

destroyChart :: ChartInstance -> Effect Unit

Destroy a chart instance and release its resources.

createChartWithCallbacks :: HTMLElement -> Json -> Foreign -> Effect ChartInstance

Create a chart with a JSON config and a callbacks/overlays object.

createChart :: HTMLElement -> Json -> Effect ChartInstance

Create a new Chart.js instance on a canvas element with a JSON config.

type ParsingConfig = { xAxisKey :: Maybe String, yAxisKey :: Maybe String }

Custom parsing keys for mapping data object properties to axes.

type Dataset = { backgroundColor :: Maybe (Indexable Color), barPercentage :: Maybe Number, barThickness :: Maybe Number, base :: Maybe (Indexable Number), borderAlign :: Maybe (Indexable BorderAlign), borderCapStyle :: Maybe CapStyle, borderColor :: Maybe (Indexable Color), borderDash :: Maybe (Array Number), borderDashOffset :: Maybe Number, borderJoinStyle :: Maybe (Indexable JoinStyle), borderRadius :: Maybe (Indexable Number), borderSkipped :: Maybe (Indexable BorderSkipped), borderWidth :: Maybe (Indexable Number), categoryPercentage :: Maybe Number, circular :: Maybe (Indexable Boolean), circumference :: Maybe Number, clip :: Maybe Number, cubicInterpolationMode :: Maybe CubicInterpolationMode, data :: Array DataPoint, drawActiveElementsOnTop :: Maybe (Indexable Boolean), fill :: Maybe Fill, grouped :: Maybe Boolean, hidden :: Maybe Boolean, hitRadius :: Maybe (Indexable Number), hoverBackgroundColor :: Maybe (Indexable Color), hoverBorderCapStyle :: Maybe CapStyle, hoverBorderColor :: Maybe (Indexable Color), hoverBorderDash :: Maybe (Array Number), hoverBorderDashOffset :: Maybe Number, hoverBorderJoinStyle :: Maybe (Indexable JoinStyle), hoverBorderRadius :: Maybe (Indexable Number), hoverBorderWidth :: Maybe (Indexable Number), hoverOffset :: Maybe (Indexable Number), hoverRadius :: Maybe (Indexable Number), indexAxis :: Maybe Axis, inflateAmount :: Maybe (Indexable Number), label :: String, maxBarThickness :: Maybe Number, minBarLength :: Maybe Number, offset :: Maybe (Indexable Number), order :: Maybe Int, parsing :: Maybe ParsingConfig, pointBackgroundColor :: Maybe (Indexable Color), pointBorderColor :: Maybe (Indexable Color), pointBorderWidth :: Maybe (Indexable Number), pointHitRadius :: Maybe (Indexable Number), pointHoverBackgroundColor :: Maybe (Indexable Color), pointHoverBorderColor :: Maybe (Indexable Color), pointHoverBorderWidth :: Maybe (Indexable Number), pointHoverRadius :: Maybe (Indexable Number), pointRadius :: Maybe (Indexable Number), pointRotation :: Maybe (Indexable Number), pointStyle :: Maybe (Indexable PointStyle), radius :: Maybe (Indexable Number), rotation :: Maybe (Indexable Number), showLine :: Maybe Boolean, skipNull :: Maybe Boolean, spacing :: Maybe Number, spanGaps :: Maybe Boolean, stack :: Maybe String, stepped :: Maybe Stepped, tension :: Maybe Number, weight :: Maybe Number, xAxisID :: Maybe String, yAxisID :: Maybe String }

Unified dataset configuration covering all Chart.js chart types.

data Color

A color value that Chart.js accepts: CSS string, gradient, or pattern.

Constructors

• CSSColor String
• GradientColor CanvasGradient
• PatternColor CanvasPattern

Instances

• Eq Color
• Show Color

data ChartType

Supported Chart.js chart types.

Constructors

• Line
• Bar
• Pie
• Doughnut
• Radar
• Scatter
• Bubble
• PolarArea

Instances

• Eq ChartType
• Generic ChartType _
• Show ChartType

type ChartOptions = { animation :: Maybe AnimationSetting, aspectRatio :: Maybe Number, circumference :: Maybe Number, cutout :: Maybe String, devicePixelRatio :: Maybe Number, elements :: Maybe ElementsConfig, indexAxis :: Maybe Axis, interaction :: Maybe InteractionConfig, layout :: Maybe LayoutConfig, locale :: Maybe String, maintainAspectRatio :: Maybe Boolean, plugins :: Maybe PluginsConfig, resizeDelay :: Maybe Number, responsive :: Maybe Boolean, rotation :: Maybe Number, scales :: Maybe (Object ScaleConfig) }

Top-level chart options.

type ChartConfig = { chartType :: ChartType, datasets :: Array Dataset, labels :: Array String, options :: ChartOptions }

Complete chart configuration: type, data, and options.

data CanvasPattern

Opaque type for a CanvasPattern object (from canvas 2D context).

data CanvasGradient

Opaque type for a CanvasGradient object (from canvas 2D context).

defaultParsingConfig :: ParsingConfig

All optional fields set to Nothing.

defaultOptions :: ChartOptions

All optional fields set to Nothing.

defaultDataset :: Dataset

Default dataset with empty label and data. All optional fields set to Nothing.

defaultConfig :: ChartConfig

Default chart config with Bar type, empty labels, and empty datasets.

css :: String -> Color

Convenience constructor for CSS color strings.

chartTypeToString :: ChartType -> String

Convert to the Chart.js string representation.