Basic Bar Chart in MUI X Charts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, Highcharts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Bar Chart in Python, R, Julia and JavaScript.

A vertical bar chart that displays categorical data with rectangular bars whose heights are proportional to the values they represent. This fundamental visualization is ideal for comparing discrete categories and identifying which categories have the highest or lowest values. Bar charts excel at showing rankings, distributions across categories, and making relative comparisons intuitive.

Basic Bar Chart rendered with MUI X Charts

Renders

JavaScript source (MUI X Charts)

// anyplot.ai
// bar-basic: Basic Bar Chart
// Library: muix 7.29.1 | JavaScript 22.23.2
// Quality: 87/100 | Created: 2026-08-20
import { BarChart } from "@mui/x-charts/BarChart";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ---------------------------------------
// Annual coffee consumption per capita — top consuming countries (kg/person/year)
const countries = ["Finland", "Norway", "Iceland", "Denmark", "Netherlands", "Sweden", "Switzerland"];
const kgPerCapita = [12.0, 9.9, 9.0, 8.7, 8.4, 8.2, 7.9];

const dataset = countries.map((country, i) => ({ country, kgPerCapita: kgPerCapita[i] }));

const TITLE_HEIGHT = 60;

// --- Chart (default-exported component — the harness mounts it) -----------
export default function Chart() {
  const { width, height } = window.ANYPLOT_SIZE;

  return (
    <Box sx={{ width, height, display: "flex", flexDirection: "column", paddingTop: "20px" }}>
      <Typography
        sx={{ color: t.ink, fontSize: 22, fontWeight: 500, textAlign: "center", lineHeight: 1.2 }}
      >
        bar-basic · javascript · muix · anyplot.ai
      </Typography>
      <BarChart
        width={width}
        height={height - TITLE_HEIGHT}
        dataset={dataset}
        colors={[t.palette[0]]}
        skipAnimation
        barLabel="value"
        xAxis={[{ scaleType: "band", dataKey: "country", label: "Country" }]}
        yAxis={[{ label: "Coffee Consumption (kg per capita/year)" }]}
        series={[{ dataKey: "kgPerCapita", label: "Coffee consumption" }]}
        grid={{ horizontal: true }}
        margin={{ top: 32, right: 32, bottom: 64, left: 88 }}
        slotProps={{ legend: { hidden: true } }}
        sx={{
          "& .MuiChartsAxis-tickLabel": { fontSize: "14px" },
          "& .MuiChartsAxis-label": { fontSize: "16px" },
          "& .MuiBarLabel-root": { fontSize: "14px", fill: t.ink },
        }}
      />
    </Box>
  );
}

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/bar-basic/muix/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "bar-basic",
  "language": "javascript",
  "library": "muix",
  "page": "https://anyplot.ai/bar-basic/javascript/muix",
  "hub": "https://anyplot.ai/bar-basic",
  "code_json": "https://api.anyplot.ai/specs/bar-basic/muix/code",
  "spec_json": "https://api.anyplot.ai/specs/bar-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/bar-basic/javascript/muix/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/bar-basic/javascript/muix/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/bar-basic/javascript/muix/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/bar-basic/javascript/muix/plot-dark.html",
  "quality_score": 87.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Bar Chart on anyplot.ai.

Other implementations