Axes and Grids

Configure axes with <dc-axis> and grid lines with <dc-grid>. These features are only available for <dc-chart> (bar, line, and bubble charts).

Category Label Overflow

Use <dc-axis> with label-interval and label-lines attributes to handle overlapping category axis labels when you have many data points.

Default Behavior: label-interval="auto" automatically hides overlapping labels while always showing the first and last labels.

Default (Auto-hide)

<dc-chart width="500" height="350" show-value="false">
  <dc-title>Many Bars - Auto-hide Labels</dc-title>
  <dc-bar value="10" label="January"></dc-bar>
  <dc-bar value="15" label="February"></dc-bar>
  <dc-bar value="20" label="March"></dc-bar>
  <dc-bar value="25" label="April"></dc-bar>
  <dc-bar value="18" label="May"></dc-bar>
  <dc-bar value="22" label="June"></dc-bar>
  <dc-bar value="30" label="July"></dc-bar>
  <dc-bar value="28" label="August"></dc-bar>
  <dc-bar value="24" label="September"></dc-bar>
  <dc-bar value="19" label="October"></dc-bar>
  <dc-bar value="14" label="November"></dc-bar>
  <dc-bar value="12" label="December"></dc-bar>
</dc-chart>
Many Bars - Auto-hide Labels

Show All Labels (label-interval="1")

<dc-chart width="500" height="350" show-value="false">
  <dc-axis position="bottom" label-interval="1"></dc-axis>
  <dc-title>All Labels Shown (Overlapping)</dc-title>
  <dc-bar value="10" label="January"></dc-bar>
  <dc-bar value="15" label="February"></dc-bar>
  <dc-bar value="20" label="March"></dc-bar>
  <dc-bar value="25" label="April"></dc-bar>
  <dc-bar value="18" label="May"></dc-bar>
  <dc-bar value="22" label="June"></dc-bar>
  <dc-bar value="30" label="July"></dc-bar>
  <dc-bar value="28" label="August"></dc-bar>
  <dc-bar value="24" label="September"></dc-bar>
  <dc-bar value="19" label="October"></dc-bar>
  <dc-bar value="14" label="November"></dc-bar>
  <dc-bar value="12" label="December"></dc-bar>
</dc-chart>
All Labels Shown (Overlapping)

Staggered Labels (label-lines="2")

<dc-chart width="500" height="350" show-value="false">
  <dc-axis position="bottom" label-interval="1" label-lines="2"></dc-axis>
  <dc-title>Labels on Two Lines</dc-title>
  <dc-bar value="10" label="January"></dc-bar>
  <dc-bar value="15" label="February"></dc-bar>
  <dc-bar value="20" label="March"></dc-bar>
  <dc-bar value="25" label="April"></dc-bar>
  <dc-bar value="18" label="May"></dc-bar>
  <dc-bar value="22" label="June"></dc-bar>
  <dc-bar value="30" label="July"></dc-bar>
  <dc-bar value="28" label="August"></dc-bar>
  <dc-bar value="24" label="September"></dc-bar>
  <dc-bar value="19" label="October"></dc-bar>
  <dc-bar value="14" label="November"></dc-bar>
  <dc-bar value="12" label="December"></dc-bar>
</dc-chart>
Labels on Two Lines

Every Third Label (label-interval="3")

<dc-chart width="500" height="350" show-value="false">
  <dc-axis position="bottom" label-interval="3"></dc-axis>
  <dc-title>Every Third Label</dc-title>
  <dc-bar value="10" label="January"></dc-bar>
  <dc-bar value="15" label="February"></dc-bar>
  <dc-bar value="20" label="March"></dc-bar>
  <dc-bar value="25" label="April"></dc-bar>
  <dc-bar value="18" label="May"></dc-bar>
  <dc-bar value="22" label="June"></dc-bar>
  <dc-bar value="30" label="July"></dc-bar>
  <dc-bar value="28" label="August"></dc-bar>
  <dc-bar value="24" label="September"></dc-bar>
  <dc-bar value="19" label="October"></dc-bar>
  <dc-bar value="14" label="November"></dc-bar>
  <dc-bar value="12" label="December"></dc-bar>
</dc-chart>
Every Third Label

Quarterly Data Example

With many quarterly data points, label-interval="auto" automatically determines the best spacing.

24 Quarters - Auto Interval

<dc-chart width="500" height="350" show-value="false">
  <dc-title>6 Years of Quarterly Data</dc-title>
  <dc-bar value="10" label="2020 Q1"></dc-bar>
  <dc-bar value="15" label="2020 Q2"></dc-bar>
  ... (24 bars total)
</dc-chart>
6 Years of Quarterly Data

24 Quarters - 3 Lines

<dc-chart width="500" height="350" show-value="false">
  <dc-axis position="bottom" label-interval="1" label-lines="3"></dc-axis>
  <dc-title>Quarterly Data - Staggered 3 Lines</dc-title>
  ... (24 bars)
</dc-chart>
Quarterly Data - Staggered 3 Lines

Axis Titles

Add titles to axes by nesting a <dc-title> inside <dc-axis>.

Y-Axis Title

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-title>Revenue ($)</dc-title>
  </dc-axis>
  <dc-title>Monthly Sales</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Revenue ($) Monthly Sales

X-Axis Title

<dc-chart width="500" height="350">
  <dc-axis position="bottom">
    <dc-title>Month</dc-title>
  </dc-axis>
  <dc-title>Monthly Sales</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Month Monthly Sales

Both Axis Titles

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-title>Revenue ($)</dc-title>
  </dc-axis>
  <dc-axis position="bottom">
    <dc-title>Month</dc-title>
  </dc-axis>
  <dc-title>Monthly Sales</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Revenue ($) Month Monthly Sales

Styled Axis Titles

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-title fill="#1976d2" font-weight="bold">Revenue ($)</dc-title>
  </dc-axis>
  <dc-axis position="bottom">
    <dc-title fill="#1976d2" font-weight="bold">Month</dc-title>
  </dc-axis>
  <dc-title>Styled Axis Titles</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Revenue ($) Month Styled Axis Titles

Grid Styling

Control grid line appearance with the <dc-grid> element nested inside <dc-axis>.

Default Behavior: Value axes (left/right) show grid lines by default. Label axes (bottom/top) do not show grid lines.

Default Grid

<dc-chart width="500" height="350">
  <dc-title>Default Grid Lines</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Default Grid Lines

Dashed Grid Lines

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-grid stroke-dasharray="dashed"></dc-grid>
  </dc-axis>
  <dc-title>Dashed Grid</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Dashed Grid

Dotted Grid Lines

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-grid stroke-dasharray="dotted"></dc-grid>
  </dc-axis>
  <dc-title>Dotted Grid</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Dotted Grid

Custom Grid Color

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-grid stroke="#b3e5fc"></dc-grid>
  </dc-axis>
  <dc-title>Blue Grid</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Blue Grid

Hiding Grid Lines

Use the hidden attribute on <dc-grid> to hide grid lines.

No Grid Lines

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-grid hidden></dc-grid>
  </dc-axis>
  <dc-title>Grid Hidden</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Grid Hidden

Combined Grid and Title

<dc-chart width="500" height="350">
  <dc-axis position="left">
    <dc-grid stroke="#ffcdd2" stroke-dasharray="dashed"></dc-grid>
    <dc-title>Revenue</dc-title>
  </dc-axis>
  <dc-title>Styled Grid with Title</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Revenue Styled Grid with Title

Value Axis Controls

Control the value axis range and tick marks with min-value, max-value, and range-padding.

Auto Range (Default)

<dc-chart width="500" height="350">
  <dc-title>Auto-calculated Range</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Auto-calculated Range

Fixed Range (0-300)

<dc-chart width="500" height="350">
  <dc-axis position="left" min-value="0" max-value="300"></dc-axis>
  <dc-title>Fixed Range 0-300</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Fixed Range 0-300

Non-Zero Minimum

<dc-chart width="500" height="350">
  <dc-axis position="left" min-value="80"></dc-axis>
  <dc-title>Range Starting at 80</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Range Starting at 80

Range Padding

<dc-chart width="500" height="350">
  <dc-axis position="left" range-padding="20%"></dc-axis>
  <dc-title>20% Range Padding</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
20% Range Padding

Tick Configuration

Control tick marks on value axes with tick-count, tick-interval, or tick-values.

Default Ticks (~5)

<dc-chart width="500" height="350">
  <dc-title>Default Tick Count</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Default Tick Count

More Ticks (tick-count="10")

<dc-chart width="500" height="350">
  <dc-axis position="left" tick-count="10"></dc-axis>
  <dc-title>10 Ticks</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
10 Ticks

Fixed Interval (tick-interval="25")

<dc-chart width="500" height="350">
  <dc-axis position="left" tick-interval="25"></dc-axis>
  <dc-title>Ticks Every 25</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Ticks Every 25

Explicit Tick Values

<dc-chart width="500" height="350">
  <dc-axis position="left" tick-values="0,100,150,200"></dc-axis>
  <dc-title>Explicit Tick Positions</dc-title>
  <dc-bar value="120" label="Jan"></dc-bar>
  <dc-bar value="150" label="Feb"></dc-bar>
  <dc-bar value="180" label="Mar"></dc-bar>
  <dc-bar value="90" label="Apr"></dc-bar>
</dc-chart>
Explicit Tick Positions

Time Axis

Use type="time" on an axis to enable time-proportional positioning. Data points are positioned based on their actual dates, not evenly spaced.

Date Formats: The date-format attribute specifies how to parse input dates. The date-label-format attribute controls how labels are displayed.

ISO Date Labels

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-label-format="MMM d"></dc-axis>
  <dc-title>Website Traffic</dc-title>
  <dc-line label="Visits" stroke="#4CAF50">
    <dc-point value="120" label="2024-01-01"></dc-point>
    <dc-point value="180" label="2024-01-08"></dc-point>
    <dc-point value="150" label="2024-01-15"></dc-point>
    <dc-point value="220" label="2024-01-22"></dc-point>
    <dc-point value="190" label="2024-01-29"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
Website Traffic

Irregular Sampling

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-label-format="MMM d"></dc-axis>
  <dc-title>Sensor Readings</dc-title>
  <dc-line label="Readings" stroke="#FF5722">
    <dc-point value="120" label="2024-01-01"></dc-point>
    <dc-point value="180" label="2024-01-03"></dc-point>
    <dc-point value="150" label="2024-01-06"></dc-point>
    <dc-point value="220" label="2024-02-20"></dc-point>
    <dc-point value="190" label="2024-03-30"></dc-point>
  </dc-line>
</dc-chart>
Sensor Readings

Three readings days apart, then gaps of weeks. A time axis draws them where they fall; without type="time" the five points would be spread evenly and the gaps would disappear.

Custom Date Display Format

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-label-format="MM/dd"></dc-axis>
  <dc-title>Sales Trend</dc-title>
  <dc-line label="Revenue" stroke="#2196F3">
    <dc-point value="1200" label="2024-03-01"></dc-point>
    <dc-point value="1800" label="2024-03-15"></dc-point>
    <dc-point value="1500" label="2024-04-01"></dc-point>
    <dc-point value="2200" label="2024-04-15"></dc-point>
    <dc-point value="1900" label="2024-05-01"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
Sales Trend

Year Format for Long Ranges

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-label-format="yyyy"></dc-axis>
  <dc-title>Annual Growth</dc-title>
  <dc-line label="Revenue" stroke="#9C27B0">
    <dc-point value="500" label="2020-01-01"></dc-point>
    <dc-point value="750" label="2021-01-01"></dc-point>
    <dc-point value="1100" label="2022-01-01"></dc-point>
    <dc-point value="1400" label="2023-01-01"></dc-point>
    <dc-point value="1900" label="2024-01-01"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
Annual Growth

Multiple Lines with Time Axis

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-label-format="MMM d"></dc-axis>
  <dc-axis position="left">
    <dc-title>Users</dc-title>
  </dc-axis>
  <dc-title>User Activity</dc-title>
  <dc-line label="Active" stroke="#4CAF50">
    <dc-point value="100" label="2024-01-01"></dc-point>
    <dc-point value="150" label="2024-01-15"></dc-point>
    <dc-point value="180" label="2024-02-01"></dc-point>
  </dc-line>
  <dc-line label="New" stroke="#FF9800">
    <dc-point value="50" label="2024-01-01"></dc-point>
    <dc-point value="80" label="2024-01-15"></dc-point>
    <dc-point value="65" label="2024-02-01"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
Users User Activity

Custom Date Parsing

Use date-format to specify how input dates should be parsed when they don't follow ISO 8601 format.

Format Tokens: yyyy (year), MM (month), dd (day), HH (hour), mm (minute), MMM (short month name)

US Date Format (MM/dd/yyyy)

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-format="MM/dd/yyyy"
      date-label-format="MMM d"></dc-axis>
  <dc-title>US Date Input</dc-title>
  <dc-line label="Sales" stroke="#E91E63">
    <dc-point value="100" label="01/15/2024"></dc-point>
    <dc-point value="150" label="02/20/2024"></dc-point>
    <dc-point value="120" label="03/25/2024"></dc-point>
    <dc-point value="180" label="04/30/2024"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
US Date Input

European Date Format (dd/MM/yyyy)

<dc-chart width="500" height="350">
  <dc-axis position="bottom" type="time"
      date-format="dd/MM/yyyy"
      date-label-format="d MMM"></dc-axis>
  <dc-title>European Date Input</dc-title>
  <dc-line label="Orders" stroke="#009688">
    <dc-point value="80" label="15/01/2024"></dc-point>
    <dc-point value="120" label="20/02/2024"></dc-point>
    <dc-point value="95" label="25/03/2024"></dc-point>
    <dc-point value="150" label="30/04/2024"></dc-point>
  </dc-line>
  <dc-legend position="right"></dc-legend>
</dc-chart>
European Date Input