Learnalog
Playground

Chart.js Visualizations

Use Chart.js charts inside VitePress Markdown pages.

Chart.js Visualizations

ChartJsFigure is for data-oriented charts. Unlike ModelCurveChart, it uses Chart.js canvas rendering and is better suited to line charts, bar charts, scatter plots, return series, portfolio sorts, and simulation output.

Line Chart: Power Curves

Larger samples produce steeper power curves

For the same true effect size, a larger sample is more likely to reject a false null.

Chart.js provides legends and tooltips by default, which makes it useful for charts where students need to compare data values.

Bar Chart: Factor Sorts

Portfolio sort returns

Bar charts make monotonicity checks easy to scan.

Use bar charts for cross-sectional comparisons, portfolio sorts, and variance analysis.

Scatter Plot: Risk and Return

Asset risk and expected return

Scatter plots work well for estimated samples, outliers, and risk-return relationships.

Use ModelCurveChart when the teaching point depends on custom model annotations; use ChartJsFigure when the teaching point depends on data values and interactive comparison.
Edit this pageorReport an issue

WebR Playground

Interactive R environment running directly in your browser

Statistics for General Insurance

A compact, example-led course in reserving, loss models, reinsurance, aggregate risk, and ruin.

Copyright © 2026