Charts - Responsive

#Usage

import { ChartCanvas, ChartResponsive, ChartSvg } from '@primeui/vue-chart';

<ChartSvg>
    <ChartResponsive />
    <!-- series and axes -->
</ChartSvg>

Charts fill their container by default. ChartResponsive adds intelligent scaling on top: font sizes, padding, tick labels, and legend position adapt across four container-width tiers. Use rules to define custom breakpoints and configuration overrides.

#Basic

Add ChartResponsive to enable adaptive scaling. By default the chart adjusts font sizes, padding, tick label sizes, data label rotation, and legend position based on the chart container width. No configuration needed.

#Auto-Adaptive Scaling

The built-in auto-adaptive system scales chart elements across four tiers based on container width. All font values scale proportionally when a global fontSize is set on ChartSvg or ChartCanvas.

Set disableAutoAdaptive to true to turn off all scaling and lock to lg tier defaults.

#Custom Rules

Set rules to define condition-based prop overrides. Each rule specifies pixel conditions (maxWidth, minWidth, maxHeight, minHeight) and a props object mapping feature names to their override values. All matching rules are applied. Last rule wins on conflicting keys.

<ChartResponsive
    :rules="[
        {
            maxWidth: 500,
            props: {
                legend: { enabled: false },
                title: { fontSize: 12 }
            }
        },
        {
            maxWidth: 300,
            props: {
                xAxis: { visible: false },
                yAxis: { visible: false },
                dataLabels: { enabled: false }
            }
        }
    ]"
/>

#Custom Breakpoints

Set breakpoints to override the container width thresholds used by the auto-adaptive system. Override only the necessary breakpoints. Unset ones keep their defaults.

<ChartResponsive :breakpoints="{ xs: 250, sm: 450, md: 650 }" />

#Hiding Elements at Small Sizes

Use rules to hide the legend, tooltip, or data labels at small container sizes, or to remove axes entirely to maximize the plot area. Axis hiding is layout-aware. The plot area expands to fill the reclaimed space rather than leaving a gap.

#Mobile Dashboard

Real dashboards usually combine multiple panels, not one isolated chart. This mobile commerce example uses a revenue/conversion combo chart, a traffic donut, and regional support bars. Each panel owns ChartResponsive rules that hide legends or axes as the container shrinks, while the outer CSS grid collapses to one column without horizontal window overflow.

#API

#ChartResponsive

#ChartSvg / ChartCanvas

#ResponsiveRule

All conditions are optional and AND'd together. A rule applies only when all specified conditions are met. Multiple matching rules are all applied with last-rule-wins on key conflicts.

#Wired Rule Overrides

Only specific key/property combinations are consumed by the responsive engine. Other keys are accepted without error but have no effect.

#ResponsiveBreakpoints

Container width thresholds in pixels for the auto-adaptive tier system. Override any subset. Unset breakpoints keep their defaults.

#Related Docs

• Title & Caption
• Legend
• Axes
• Export