Playground — Bar Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · Full AI Reference · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/bar-chart

Bar Chart Playground

Experiment with BarChart props in real time. Adjust the controls below the chart to see how each prop affects the visualization, then copy the generated code.

Dataset:

Data safe · 1 numeric field checkedData Truth Lens

The current data satisfies this chart’s declared numeric contract:

value: value · values required

Bars

Orientation

Bar Padding

Sort

Interaction

Enable Hover

Layout

Show Grid

Show Legend

Labels

Category Label

Value Label

Title

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { BarChart } from "semiotic" const data = [ { category: "Electronics", value: 42000 }, { category: "Clothing", value: 28000 }, { category: "Home", value: 35000 }, { category: "Sports", value: 18000 }, { category: "Books", value: 12000 }, { category: "Toys", value: 22000 }, ] <BarChart data={data} />