charts

Charts

An opt-in, dependency-free SVG charting add-on. Link dist/psyn-charts.css and dist/psyn-charts.js alongside the core bundle, then construct new psy.Chart(el, config).

Line & area

Line

Area

new psy.Chart(el, {
  type: "line", // or "area"
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  series: [
    { name: "Revenue", data: [12, 19, 14, 25, 22, 30] },
    { name: "Costs", data: [8, 11, 9, 14, 13, 17] },
  ],
});

Bar

Grouped

Stacked, horizontal

new psy.Chart(el, {
  type: "bar",
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  series: [
    { name: "Revenue", data: [12, 19, 14, 25, 22, 30] },
    { name: "Costs", data: [8, 11, 9, 14, 13, 17] },
  ],
  options: { stacked: true, horizontal: true },
});

Pie & donut

Pie

Donut

new psy.Chart(el, {
  type: "pie", // or "donut"
  labels: ["Design", "Engineering", "Sales", "Support"],
  series: [{ data: [30, 40, 15, 15] }],
});

Sparkline

Revenue

$48,204

new psy.Chart(el, {
  type: "sparkline",
  series: [{ data: [4, 6, 5, 9, 8, 12, 10, 14, 13, 18] }],
});