Skip to main content

Chart

Use Chart to visualize simple campaign data, comparisons, scores, or proof metrics directly inside a landing page without embedding an external dashboard.

How It Works In Atomicat​

The Chart element stores Chart.js-style labels and datasets. The drawer supports line, bar, and pie chart types, dataset labels, data points, add/delete/reorder actions, and per-dataset editing. The style drawer controls dimensions, dataset fill style, solid or gradient colors, chart area, axes, and grid visibility. The rendered component initializes Chart.js in preview/publish contexts, sets responsive chart options, and hides axes for pie charts.

When To Use It​

  • Show before/after metrics, survey results, score distributions, or simple benchmark comparisons.
  • Add proof to B2B or educational pages where numbers matter.
  • Visualize quiz or assessment outcomes when a static text claim is not enough.
  • Create a compact chart that inherits the page design instead of linking away.

Configure The Element​

  • Choose line, bar, or pie based on the story: trends, comparisons, or proportions.
  • Name each dataset clearly; visitors see those labels in the legend and tooltip.
  • Add labels first, then enter numeric values for each dataset.
  • Use chart dimensions to keep the canvas stable on desktop and mobile.
  • Set solid or gradient colors per dataset and check contrast with the page background.

Testing Notes​

  • Preview every breakpoint; charts can become cramped in narrow columns.
  • Confirm all values are numeric and that deleted labels no longer leave empty points.
  • Compare the chart to the source data before publishing.

Limitations And Tips​

  • Charts are best for simple data. For long tables or complex analytics, use a dedicated report outside the landing page.
  • Pie charts should have few slices; too many categories reduce readability.
  • Do not use decorative charts with invented numbers in ad-sensitive pages.

FAQ​

Which chart types are available?

The drawer exposes line, bar, and pie chart options.

Can each dataset have its own color?

Yes. Dataset style controls support solid colors and gradients.

Why are axes missing on my pie chart?

Pie charts do not use x/y axes, so the rendered chart options omit scales for that type.