V

Vuer-Viz

vuer-vizv1.0.2

Publication-Quality Visualizations

Chart Layout

Vuer-Viz provides a consistent layout system for charts through the ChartLayout component. All charts use this component internally to handle the positioning of titles, axis labels, and legends.

Layout Structure

Every chart follows a consistent structure with these elements:

  1. Title - Positioned at the top, centered over the plot area
  2. Y-axis Label - Rotated vertically on the left side
  3. X-axis Label - Positioned at the bottom center
  4. Plot Area - The central area where data is visualized
  5. Legend - Can be positioned in multiple ways (see below)

Layout Structure Visualization

This example shows the actual ChartLayout component with visible structure:

Chart Layout StructurePlot Area379.52 × 310 pxX-axis LabelY-axis Label
Series A
Series B
Series C
import { ChartLayout } from "@vuer-ai/vuer-viz";

/**
 * Real ChartLayout component showing the structure with colored areas
 */
export default function LayoutStructureDemo() {
  return (
    <ChartLayout
      width={600}
      height={400}
      title="Chart Layout Structure"
      xLabel="X-axis Label"
      yLabel="Y-axis Label"
      legend={true}
      layout="aside"
      legendItems={[
        { label: "Series A", color: "#23aaff" },
        { label: "Series B", color: "#ffaf24" },
        { label: "Series C", color: "#10b981" },
      ]}
      fontSize={14}
    >
      {({ plotWidth, plotHeight, margin, clipPathId }) => (
        <>
          {/* Grid lines to show plot area structure */}
          <g className="structure-grid">
            {/* Vertical center line */}
            <line
              x1={margin.left + plotWidth / 2}
              y1={margin.top}
              x2={margin.left + plotWidth / 2}
              y2={margin.top + plotHeight}
              stroke="#999"
              strokeWidth="1"
              strokeDasharray="4 4"
              opacity="0.3"
            />
            {/* Horizontal center line */}
            <line
              x1={margin.left}
              y1={margin.top + plotHeight / 2}
              x2={margin.left + plotWidth}
              y2={margin.top + plotHeight / 2}
              stroke="#999"
              strokeWidth="1"
              strokeDasharray="4 4"
              opacity="0.3"
            />
          </g>

          {/* Plot area border */}
          <rect
            x={margin.left}
            y={margin.top}
            width={plotWidth}
            height={plotHeight}
            fill="none"
            stroke="#ccc"
            strokeWidth="2"
          />

          {/* Center text */}
          <text
            x={margin.left + plotWidth / 2}
            y={margin.top + plotHeight / 2}
            textAnchor="middle"
            dominantBaseline="middle"
            fontSize="16"
            fill="#999"
          >
            Plot Area
          </text>

          {/* Dimension labels */}
          <text
            x={margin.left + plotWidth / 2}
            y={margin.top + plotHeight / 2 + 25}
            textAnchor="middle"
            fontSize="12"
            fill="#666"
          >
            {plotWidth} × {plotHeight} px
          </text>
        </>
      )}
    </ChartLayout>
  );
}

Legend Layouts

Vuer-Viz supports two legend layout strategies via the layout prop:

Overlay Layouts

The legend overlays on top of the plot area at various positions. This maximizes the use of the plot area while keeping the legend visible.

TitleY-axis LabelPlot AreaLegend(overlay)X-axis Label

Positions:

  • "top-left" - Top-left corner
  • "top" - Top center
  • "top-right" - Top-right corner (default, matplotlib-style)
  • "left" - Left center
  • "right" - Right center
  • "bottom-left" - Bottom-left corner
  • "bottom" - Bottom center
  • "bottom-right" - Bottom-right corner

Use when: You want to maximize plot area and the legend doesn't obscure important data.

Aside Layouts

The legend is positioned outside the plot area. The plot area automatically adjusts to make room for the legend.

TitleY-axis LabelPlot AreaLegend(aside/right)X-axis Label

Positions:

  • "aside" - Positioned to the right, outside plot area
  • "aside-bottom" - Positioned at the bottom, outside plot area

Use when: The legend would obscure important data if overlaid, or when you want a cleaner separation between legend and data. The "aside" layout is recommended for parallel coordinates charts.

Examples

Line Chart - Overlay Legend (Top-Right)

The default behavior - legend overlays at top-right:

Line Chart - Overlay Legend00.20.40.60.8100.20.40.60.81TimeValue
Series A
Series B
import { LineChart } from "@vuer-ai/vuer-viz";

/**
 * Line chart with overlay legend (default layout)
 */
export default function LineOverlay() {
  const series = [
    {
      label: "Series A",
      x: [0, 1, 2, 3, 4, 5],
      y: [10, 25, 18, 32, 28, 35],
      color: "#23aaff",
    },
    {
      label: "Series B",
      x: [0, 1, 2, 3, 4, 5],
      y: [15, 20, 25, 22, 30, 28],
      color: "#ffaf24",
    },
  ];

  return (
    <LineChart
      series={series}
      width={500}
      height={300}
      title="Line Chart - Overlay Legend"
      xLabel="Time"
      yLabel="Value"
      legend={true}
      layout="top-left"
    />
  );
}

<LineChart
  series={series}
  title="Line Chart - Overlay Legend"
  xLabel="Time"
  yLabel="Value"
  legend={true}
  layout="top-right" // default
/>

Line Chart - Legend Aside

Legend positioned to the right of the plot area:

Line Chart - Legend Aside (Right)00.20.40.60.8100.20.40.60.81TimeValue
Series A
Series B
import { LineChart } from "@vuer-ai/vuer-viz";

/**
 * Line chart with legend on the right side (aside layout)
 */
export default function LineAsideRight() {
  const series = [
    {
      label: "Series A",
      x: [0, 1, 2, 3, 4, 5],
      y: [10, 25, 18, 32, 28, 35],
      color: "#23aaff",
    },
    {
      label: "Series B",
      x: [0, 1, 2, 3, 4, 5],
      y: [15, 20, 25, 22, 30, 28],
      color: "#ffaf24",
    },
  ];

  return (
    <LineChart
      series={series}
      width={600}
      height={300}
      title="Line Chart - Legend Aside (Right)"
      xLabel="Time"
      yLabel="Value"
      legend={true}
      layout="aside"
    />
  );
}

<LineChart
  series={series}
  title="Line Chart - Legend Aside"
  xLabel="Time"
  yLabel="Value"
  legend={true}
  layout="aside"
/>

Parallel Coordinates - Legend Aside

For parallel coordinates, the aside layout is recommended:

Vehicle Performance - Legend AsideSpeed0.025.050.075.0100.0Acceleration0.02.55.07.510.0Handling0.025.050.075.0100.0Durability0.025.050.075.0100.0Sports CarSUVSedan
import { ParallelAxis } from "@vuer-ai/vuer-viz";

/**
 * Parallel coordinates example with legend on the right
 */
export default function ParallelRightLegend() {
  const dimensions = [
    { name: "Speed", type: "continuous" as const, min: 0, max: 100 },
    { name: "Acceleration", type: "continuous" as const, min: 0, max: 10 },
    { name: "Handling", type: "continuous" as const, min: 0, max: 100 },
    { name: "Durability", type: "continuous" as const, min: 0, max: 100 },
  ];

  const series = [
    {
      label: "Sports Car",
      values: [95, 8.5, 75, 60],
      color: "#23aaff",
    },
    {
      label: "SUV",
      values: [60, 5.0, 65, 90],
      color: "#ffaf24",
    },
    {
      label: "Sedan",
      values: [70, 6.0, 70, 80],
      color: "#10b981",
    },
  ];

  return (
    <ParallelAxis
      dimensions={dimensions}
      series={series}
      width={700}
      height={300}
      title="Vehicle Performance - Legend Aside"
      legend={true}
      layout="aside"
      fontSize={12}
    />
  );
}

<ParallelAxis
  dimensions={dimensions}
  series={series}
  title="Vehicle Performance"
  legend={true}
  layout="aside" // recommended for parallel coordinates
/>

Other Overlay Positions

Try different overlay positions to find what works best for your data:

// Top-left overlay
<LineChart
  series={series}
  title="Chart Title"
  xLabel="X-axis"
  yLabel="Y-axis"
  legend={true}
  layout="top-left"
/>

// Bottom overlay
<LineChart
  series={series}
  title="Chart Title"
  xLabel="X-axis"
  yLabel="Y-axis"
  legend={true}
  layout="bottom"
/>

// Left overlay
<LineChart
  series={series}
  title="Chart Title"
  xLabel="X-axis"
  yLabel="Y-axis"
  legend={true}
  layout="left"
/>

Legend Aside Bottom

For horizontal legend layout at the bottom, outside plot area:

<LineChart
  series={series}
  title="Chart Title"
  xLabel="X-axis"
  yLabel="Y-axis"
  legend={true}
  layout="aside-bottom"
/>

No Legend

To hide the legend entirely:

<LineChart
  series={series}
  title="Chart Title"
  xLabel="X-axis"
  yLabel="Y-axis"
  legend={false}
/>

Layout Options

The layout prop accepts the following values:

Overlay (legend overlays on plot area):

  • "top-left", "top", "top-right" (default)
  • "left", "right"
  • "bottom-left", "bottom", "bottom-right"

Aside (legend outside plot area):

  • "aside" - To the right
  • "aside-bottom" - At the bottom

Plot Area

The plot area is the interactive region where chart data is displayed. It automatically adjusts based on:

  • Specified width and height
  • Margin requirements for axis labels
  • Legend position (for aside layouts)

All interactive features (hover, zoom, pan) are confined to the plot area and respect the layout margins.

Customizing Layout

While the layout structure is consistent, you can customize various aspects:

<LineChart
  series={series}
  width={800}
  height={600}
  title="Custom Layout"
  titleFontSize={24}
  fontSize={14}
  legendFontSize={12}
  fontFamily="Inter, sans-serif"
  layout="aside"
/>

Related

Previous
Data Formatters
Next
Fast Canvas Render