Skip to content

Chart

<quiet-chart> stable since 2.1

Charts visualize data as bar, line, pie, and other common chart types.

This component wraps Chart.js , providing sensible defaults that align with Quiet UI's aesthetic. It includes over a dozen themes that adapt to light and dark mode and handle RTL automatically. All chart types are supported. Since charts render to a <canvas>, data and customizations are primarily set with JavaScript. However, convenience attributes are available for common options to reduce boilerplate.

For advanced use cases, the underlying Chart.js instance is exposed, allowing you to register plugins, add custom animations, format tooltips, and configure any other Chart.js option you may need. 

<div id="chart__overview">
  <quiet-chart
    label="Daily naps showing slight variations for each quarter"
    chart-title="Daily Naps"
    min="0"
    max="20"
  ></quiet-chart>

  <quiet-select label="Theme" value="default">
    <option value="default">Default</option>
    <option value="berry">Berry</option>
    <option value="blueprint">Blueprint</option>
    <option value="bright">Bright</option>
    <option value="earth">Earth</option>
    <option value="fire">Fire</option>
    <option value="forest">Forest</option>
    <option value="grayscale">Grayscale</option>
    <option value="ocean">Ocean</option>
    <option value="pastel">Pastel</option>
    <option value="sunset">Sunset</option>
    <option value="vintage">Vintage</option>
  </quiet-select>
</div>

<script>
  const container = document.getElementById('chart__overview');
  const chart = container.querySelector('quiet-chart');
  const select = container.querySelector('quiet-select');

  // Provide labels and chart data
  chart.data = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      { label: 'Mr. Whiskers', data: [12, 14, 16, 15] },
      { label: 'Princess Fluff', data: [8, 12, 15, 19] },
      { label: 'Captain Meow', data: [5, 9, 7, 11] }
    ]
  };

  // Change the theme
  select.addEventListener('change', () => {
    chart.theme = select.value;
  });
</script>

<style>
  #chart__overview {
    quiet-select {
      margin-block-start: 1rem;
      max-width: 200px;
    }
  }
</style>

In the same way that images require alt text, you should add a label attribute to every chart. The label won't be displayed, but it will be announced by assistive devices.

Examples Jump to heading

Providing data Jump to heading

Charts require data to be set via the data property. This property accepts a standard Chart.js data object containing labels and datasets. 

<quiet-chart
  id="chart__data"
  chart-title="Treats Consumed"
  label="Monthly treats consumed by cats"
></quiet-chart>

<script>
  const chart = document.getElementById('chart__data');

  // Provide labels and chart data
  chart.data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      { label: 'Mr. Whiskers', data: [42, 38, 55, 47, 62] },
      { label: 'Princess Fluff', data: [35, 45, 40, 52, 48] }
    ]
  };
</script>

Adding a title Jump to heading

Use the chart-title attribute to display a visible title above the chart.

<quiet-chart
  id="chart__label"
  chart-title="Monthly Belly Rubs"
  label="Monthly belly rubs given"
></quiet-chart>

<script>
  document.getElementById('chart__label').data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Belly Rubs', data: [120, 190, 150, 210] }]
  };
</script>

Adding axis labels Jump to heading

Use the x-label and y-label attributes to add labels to the axes.

<quiet-chart
  id="chart__axis"
  chart-title="Catnip Expenses"
  label="Monthly catnip expenses"
  x-label="Month"
  y-label="Treats ($)"
></quiet-chart>

<script>
  document.getElementById('chart__axis').data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{ label: 'Catnip', data: [45, 52, 48, 61, 72] }]
  };
</script>

Accessibility Jump to heading

Chart.js renders charts on <canvas> elements, which are not inherently accessible to screen readers. To address this, charts have role="img" and use the label attribute to set an accessible name via aria-label.

You should always provide a meaningful label that describes the chart's content and purpose. A good label conveys what the chart shows, not just its type. For example, instead of "Bar chart," use "Monthly sales showing steady growth from January to June." 

<quiet-chart
  label="Monthly sales showing steady growth from January to June"
  chart-title="Monthly Sales"
></quiet-chart>
Providing a table for screen readers

For complex charts, consider providing a visually hidden data table as an alternative. This gives screen reader users access to the underlying data in a structured format. Place a <table> with the quiet-sr-only class near the chart to make it available to assistive technologies while keeping it hidden from sighted users. The quiet-sr-only class is provided by CSS utilities. 

<quiet-chart
  label="Quarterly sales by region"
  chart-title="Sales by Region"
></quiet-chart>

<table class="quiet-sr-only">
  <caption>Quarterly sales by region</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$12,000</td>
      <td>$15,000</td>
      <td>$18,000</td>
      <td>$22,000</td>
    </tr>
    <!-- Additional rows... -->
  </tbody>
</table>

For more information on canvas accessibility, refer to the Chart.js Accessibility documentation .

Bar charts Jump to heading

Use type="bar" to create a bar chart. This is the default chart type.

<quiet-chart
  id="chart__bar"
  type="bar"
  chart-title="Favorite Napping Spots"
  label="Favorite napping spots by number of cats"
  min="0"
  max="20"
></quiet-chart>

<script>
  document.getElementById('chart__bar').data = {
    labels: ['Sunny Window', 'Cardboard Box', 'Laptop', 'Clean Laundry', 'Your Face'],
    datasets: [{ label: 'Cats', data: [18, 15, 12, 9, 7] }]
  };
</script>

Set index-axis="y" to create horizontal bar charts.

<quiet-chart
  id="chart__horizontal"
  chart-title="Favorite Toys"
  index-axis="y"
  label="Favorite cat toys ranked"
></quiet-chart>

<script>
  document.getElementById('chart__horizontal').data = {
    labels: ['Laser Pointer', 'Feather Wand', 'Crinkle Ball', 'Empty Box'],
    datasets: [{ label: 'Interest Level', data: [95, 82, 68, 99] }]
  };
</script>

Line charts Jump to heading

Use type="line" to create a line chart. You can control the curve smoothness by setting tension on the dataset. Use 0 for straight lines or 0.4 for smooth curves. 

<quiet-chart
  id="chart__line"
  type="line"
  chart-title="Zoomies Per Day"
  label="Daily zoomies tracked over six months"
  min="0"
  max="40"
></quiet-chart>

<script>
  document.getElementById('chart__line').data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      { label: 'Mr. Whiskers', data: [8, 15, 12, 18, 14, 20], tension: 0.4 },
      { label: 'Princess Fluff', data: [14, 20, 25, 22, 28, 32], tension: 0.4 },
      { label: 'Sir Pounce', data: [22, 28, 18, 35, 24, 38], tension: 0.4 }
    ]
  };
</script>

Area charts Jump to heading

Set fill: true on a dataset to fill the area under line charts, creating an area chart.

<quiet-chart
  id="chart__fill"
  chart-title="Cuddle Requests"
  type="line"
  label="Area chart showing cuddle requests increasing from 12 in January to 30 in June"
></quiet-chart>

<script>
  document.getElementById('chart__fill').data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Requests',
      data: [12, 19, 15, 25, 22, 30],
      fill: true
    }]
  };
</script>

Pie charts Jump to heading

Use type="pie" to create a pie chart. Pie charts work best with a single dataset. 

<quiet-chart
  id="chart__pie"
  type="pie"
  chart-title="Time Spent"
  label="How cats spend their day"
  style="aspect-ratio: 4/3;"
></quiet-chart>

<script>
  document.getElementById('chart__pie').data = {
    labels: ['Sleeping', 'Eating', 'Judging You', 'Knocking Things Over'],
    datasets: [{ data: [70, 10, 15, 5] }]
  };
</script>

Doughnut charts Jump to heading

Use type="doughnut" to create a doughnut chart, which is similar to a pie chart but with a hollow center. 

<quiet-chart
  id="chart__doughnut"
  type="doughnut"
  chart-title="Fur Distribution"
  label="Where the fur ends up"
  style="aspect-ratio: 4/3;"
></quiet-chart>

<script>
  document.getElementById('chart__doughnut').data = {
    labels: ['Your Clothes', 'The Couch', 'Still on Cat'],
    datasets: [{ data: [55, 35, 10] }]
  };
</script>

Radar charts Jump to heading

Use type="radar" to create a radar chart, useful for comparing multiple variables across different categories. 

<quiet-chart
  id="chart__radar"
  type="radar"
  chart-title="Cat Stats"
  label="Comparison of cat abilities"
  style="aspect-ratio: 4/3;"
></quiet-chart>

<script>
  document.getElementById('chart__radar').data = {
    labels: ['Fluffiness', 'Zoomies', 'Napping', 'Mischief', 'Purring'],
    datasets: [
      { label: 'Mr. Whiskers', data: [65, 59, 90, 81, 56] },
      { label: 'Chairman Meow', data: [28, 88, 40, 95, 76] }
    ]
  };
</script>

Polar area charts Jump to heading

Use type="polarArea" to create a polar area chart, which is similar to a pie chart but with equal angles and varying radii. 

<quiet-chart
  id="chart__polar"
  type="polarArea"
  chart-title="Meow Volume"
  label="Loudness of meows by situation"
  style="aspect-ratio: 4/3;"
></quiet-chart>

<script>
  document.getElementById('chart__polar').data = {
    labels: ['Hungry', 'Wants Attention', 'Sees a Bird', '3 AM'],
    datasets: [{ data: [11, 8, 14, 20] }]
  };
</script>

Bubble charts Jump to heading

Use type="bubble" to create a bubble chart. Each data point requires x, y, and r (radius) values. 

<quiet-chart
  id="chart__bubble"
  type="bubble"
  chart-title="Cat Toy Popularity"
  label="Cat toy popularity by size and interest"
></quiet-chart>

<script>
  document.getElementById('chart__bubble').data = {
    datasets: [{
      label: 'Feather Toys',
      data: [
        { x: 20, y: 30, r: 15 },
        { x: 40, y: 10, r: 10 },
        { x: 30, y: 22, r: 20 }
      ]
    }, {
      label: 'Cardboard Boxes',
      data: [
        { x: 10, y: 15, r: 12 },
        { x: 25, y: 35, r: 8 },
        { x: 45, y: 25, r: 18 }
      ]
    }]
  };
</script>

Scatter charts Jump to heading

Use type="scatter" to create a scatter chart. Each data point requires x and y values. 

<quiet-chart
  id="chart__scatter"
  type="scatter"
  chart-title="Nap Duration vs. Treats Consumed"
  label="Scatter plot comparing nap duration to treats consumed by cat"
  x-label="Treats"
  y-label="Nap Duration (hours)"
></quiet-chart>

<script>
  document.getElementById('chart__scatter').data = {
    datasets: [
      {
        label: 'Mr. Whiskers',
        data: [
          { x: 2, y: 3.5 },
          { x: 5, y: 4.2 },
          { x: 3, y: 3.8 },
          { x: 7, y: 5.1 },
          { x: 4, y: 4.0 }
        ]
      },
      {
        label: 'Princess Fluff',
        data: [
          { x: 4, y: 6.2 },
          { x: 6, y: 7.0 },
          { x: 3, y: 5.5 },
          { x: 8, y: 7.8 },
          { x: 5, y: 6.5 }
        ]
      },
      {
        label: 'Sir Pounce',
        data: [
          { x: 1, y: 2.0 },
          { x: 3, y: 2.8 },
          { x: 2, y: 2.5 },
          { x: 5, y: 3.5 },
          { x: 4, y: 3.0 }
        ]
      },
      {
        label: 'Chairman Meow',
        data: [
          { x: 6, y: 4.5 },
          { x: 9, y: 5.8 },
          { x: 7, y: 5.0 },
          { x: 10, y: 6.2 },
          { x: 8, y: 5.5 }
        ]
      }
    ]
  };
</script>

Controlling scale range Jump to heading

Use min and max to control the value axis scale.

<quiet-chart
  id="chart__scale"
  chart-title="Purr Intensity"
  min="50"
  max="150"
  label="Bar chart showing purr decibel levels for different activities, ranging from 65 to 125"
></quiet-chart>

<script>
  document.getElementById('chart__scale').data = {
    labels: ['Chin Scratches', 'Belly Rubs', 'Treats', 'Lap Time', 'Sunny Spot'],
    datasets: [{ label: 'Decibels', data: [65, 80, 95, 110, 125] }]
  };
</script>

Stacked charts Jump to heading

Set stacked to stack datasets on top of each other for bar charts, line charts, and area charts. 

<quiet-chart
  id="chart__stacked"
  chart-title="Daily Activities"
  stacked
  label="Stacked bar chart showing sleeping, grooming, and bird watching hours by month"
></quiet-chart>

<script>
  document.getElementById('chart__stacked').data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      { label: 'Sleeping', data: [65, 59, 80, 81] },
      { label: 'Grooming', data: [28, 48, 40, 19] },
      { label: 'Bird Watching', data: [12, 15, 18, 22] }
    ]
  };
</script>

Adjusting line tension Jump to heading

Set tension on a dataset to control the curve smoothness for line charts. Use 0 for straight lines or 0.4 for smooth curves. 

<quiet-chart
  id="chart__tension"
  chart-title="Mood Swings"
  type="line"
  label="Line chart showing cat mood fluctuations throughout the day from 6 AM to 9 PM"
></quiet-chart>

<script>
  document.getElementById('chart__tension').data = {
    labels: ['6 AM', '9 AM', '12 PM', '3 PM', '6 PM', '9 PM'],
    datasets: [{
      label: 'Smooth (0.4)',
      data: [8, 15, 11, 14, 9, 16],
      tension: 0.4
    }, {
      label: 'Straight (0)',
      data: [2, 9, 5, 8, 3, 10],
      tension: 0
    }]
  };
</script>

Configuring grid lines Jump to heading

Use the grid attribute to control which axes show grid lines. Valid values are x, y, both (default), and none.

Both X Y None 
<div id="chart__grid">
  <quiet-chart
    chart-title="Things Knocked Off Tables"
    grid="both"
    label="Things knocked off tables per day"
  ></quiet-chart>

  <quiet-radio label="Grid lines" value="both">
    <quiet-radio-item value="both">Both</quiet-radio-item>
    <quiet-radio-item value="x">X</quiet-radio-item>
    <quiet-radio-item value="y">Y</quiet-radio-item>
    <quiet-radio-item value="none">None</quiet-radio-item>
  </quiet-radio>
</div>

<script>
  const container = document.getElementById('chart__grid');
  const chart = container.querySelector('quiet-chart');
  const radio = container.querySelector('quiet-radio');

  // Provide labels and chart data
  chart.data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    datasets: [{ label: 'Items', data: [5, 10, 8, 15, 12] }]
  };

  radio.addEventListener('change', () => {
    chart.grid = radio.value;
  });
</script>

<style>
  #chart__grid {
    quiet-radio {
      margin-block-start: 1rem;
    }
  }
</style>

Hiding the legend Jump to heading

Legends are shown by default. Add the without-legend attribute to hide it. Use legend-position to control its placement. 

<quiet-chart
  id="chart__legend"
  chart-title="Naps by Room"
  without-legend
  label="Bar chart comparing quarterly naps across bedroom, living room, and kitchen"
></quiet-chart>

<script>
  document.getElementById('chart__legend').data = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      { label: 'Bedroom', data: [12, 19, 15, 25] },
      { label: 'Living Room', data: [8, 15, 12, 20] },
      { label: 'Kitchen', data: [15, 22, 18, 28] }
    ]
  };
</script>

Hiding tooltips Jump to heading

Tooltips are shown by default when hovering over data points. Add the without-tooltip attribute to hide them. 

<quiet-chart
  id="chart__tooltip"
  chart-title="Hairballs Per Day"
  without-tooltip
  label="Bar chart showing hairball counts Monday through Friday"
></quiet-chart>

<script>
  document.getElementById('chart__tooltip').data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    datasets: [{ label: 'Hairballs', data: [2, 4, 1, 3, 5] }]
  };
</script>

Disabling animations Jump to heading

Animations are enabled by default. Add the without-animation attribute to disable them.

<quiet-chart
  id="chart__animation"
  type="doughnut"
  chart-title="Scratching Post Usage"
  without-animation
  label="Doughnut chart showing scratching post minutes Monday through Thursday"
></quiet-chart>

<script>
  document.getElementById('chart__animation').data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu'],
    datasets: [{ label: 'Minutes', data: [10, 20, 15, 25] }]
  };
</script>

Setting the aspect ratio Jump to heading

Use the CSS aspect-ratio property to change the chart's proportions. The default is 16/9. 

<quiet-chart
  id="chart__ratio"
  chart-title="Snack Preferences"
  label="Snack preferences comparison"
  style="aspect-ratio: 1/1; max-width: 250px;"
></quiet-chart>

<script>
  document.getElementById('chart__ratio').data = {
    labels: ['Tuna', 'Chicken', 'Salmon'],
    datasets: [{ label: 'Preference', data: [10, 20, 15] }]
  };
</script>

Formatting tooltips Jump to heading

Use the options property to customize tooltip formatting. You can modify the title, label, and other parts of the tooltip using callback functions. 

<quiet-chart
  id="chart__tooltip-format"
  chart-title="Treats Consumed"
  label="Weekly treats with formatted tooltips"
></quiet-chart>

<script>
  const chart = document.getElementById('chart__tooltip-format');

  chart.options = {
    plugins: {
      tooltip: {
        callbacks: {
          title: (items) => `Day: ${items[0].label}`,
          label: (context) => `${context.dataset.label}: ${context.parsed.y} treats`
        }
      }
    }
  };

  // Provide labels and chart data
  chart.data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    datasets: [
      { label: 'Mr. Whiskers', data: [12, 19, 8, 15, 22] },
      { label: 'Princess Fluff', data: [8, 14, 11, 9, 18] }
    ]
  };
</script>

Changing the theme Jump to heading

Use the theme property to change the chart's color palette. Several built-in themes are available, each providing a distinct set of colors for your datasets. 

<div id="chart__theme">
  <quiet-chart
    label="Daily naps showing slight variations for each quarter"
    chart-title="Daily Naps"
    min="0"
    max="20"
  ></quiet-chart>

  <quiet-select label="Theme" value="default">
    <option value="default">Default</option>
    <option value="berry">Berry</option>
    <option value="blueprint">Blueprint</option>
    <option value="bright">Bright</option>
    <option value="earth">Earth</option>
    <option value="fire">Fire</option>
    <option value="forest">Forest</option>
    <option value="grayscale">Grayscale</option>
    <option value="ocean">Ocean</option>
    <option value="pastel">Pastel</option>
    <option value="sunset">Sunset</option>
    <option value="vintage">Vintage</option>
  </quiet-select>
</div>

<script>
  const container = document.getElementById('chart__theme');
  const chart = container.querySelector('quiet-chart');
  const select = container.querySelector('quiet-select');

  // Provide labels and chart data
  chart.data = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      { label: 'Mr. Whiskers', data: [12, 14, 16, 15] },
      { label: 'Princess Fluff', data: [8, 12, 15, 19] },
      { label: 'Captain Meow', data: [5, 9, 7, 11] },
      { label: 'Duchess Purrington', data: [18, 14, 20, 16] },
      { label: 'Sir Pounce', data: [10, 11, 13, 12] },
      { label: 'Meowy McGee', data: [15, 17, 14, 18] },
      { label: 'Baron von Fluffington', data: [7, 10, 12, 9] }
    ]
  };

  // Change the theme
  select.addEventListener('change', () => {
    chart.theme = select.value;
  });
</script>

<style>
  #chart__theme {
    quiet-select {
      margin-block-start: 1rem;
      max-width: 200px;
    }
  }
</style>

Creating a custom theme Jump to heading

By default, charts use built-in theme colors that adapt to light/dark mode. For full control over colors, use the datasetColors property to provide separate palettes for light and dark modes. This ensures your custom colors look great in both themes.

If both theme and datasetColors are set, datasetColors takes precedence for dataset colors. The theme will still affect other chart elements like text, grid lines, and borders.

Toggle Dark Mode 
<div id="chart__custom-colors">
  <div class="chart-wrapper quiet-light">
    <quiet-chart
      chart-title="Monthly Activity"
      label="Monthly cat activity comparison"
    ></quiet-chart>
  </div>
  <quiet-button toggle="off">Toggle Dark Mode</quiet-button>
</div>

<script>
  const container = document.getElementById('chart__custom-colors');
  const wrapper = container.querySelector('.chart-wrapper');
  const chart = container.querySelector('quiet-chart');
  const toggle = container.querySelector('quiet-button');

  chart.datasetColors = {
    light: [
      'rgb(219 39 119 / 50%)',
      'rgb(14 165 233 / 50%)',
      'rgb(250 204 21 / 50%)',
      'rgb(34 197 94 / 50%)',
      'rgb(168 85 247 / 50%)'
    ],
    dark: [
      'rgb(244 114 182 / 50%)',
      'rgb(56 189 248 / 50%)',
      'rgb(253 224 71 / 50%)',
      'rgb(74 222 128 / 50%)',
      'rgb(192 132 252 / 50%)'
    ]
  };

  chart.options = {
    elements: {
      bar: {
        borderWidth: 1
      }
    }
  };

  // Provide labels and chart data
  chart.data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      { label: 'Sleeping', data: [65, 59, 80, 72, 68], borderColor: 'rgb(219 39 119)' },
      { label: 'Playing', data: [28, 48, 40, 35, 52], borderColor: 'rgb(14 165 233)' },
      { label: 'Grooming', data: [40, 35, 45, 50, 38], borderColor: 'rgb(250 204 21)' },
      { label: 'Eating', data: [15, 22, 18, 25, 20], borderColor: 'rgb(34 197 94)' },
      { label: 'Zoomies', data: [12, 30, 25, 18, 35], borderColor: 'rgb(168 85 247)' }
    ]
  };

  toggle.addEventListener('click', () => {
    wrapper.classList.toggle('quiet-dark');
    wrapper.classList.toggle('quiet-light');
  });
</script>

<style>
  #chart__custom-colors {
    .chart-wrapper {
      padding: 1rem;
      border-radius: 0.5rem;
      background: var(--quiet-background-color);
    }

    quiet-button {
      margin-block-start: 1rem;
    }
  }
</style>

You can also set colors directly on individual datasets using backgroundColor, borderColor, and borderWidth properties. Note that borderWidth must be set for borders to appear on bar charts.

For more styling options, refer to the Chart.js Styling documentation .

Customizing fonts Jump to heading

Use the options property to customize fonts for various chart elements. You can set global defaults or target specific elements like the legend, title, and axis labels. 

<quiet-chart
  id="chart__fonts"
  chart-title="Lap Time vs Playtime"
  label="Lap time vs playtime comparison"
></quiet-chart>

<script>
  const chart = document.getElementById('chart__fonts');

  // Set options before data to ensure fonts are applied when the chart is created
  chart.options = {
    plugins: {
      legend: {
        labels: {
          font: { size: 14, family: 'Palatino, Georgia, sans-serif', weight: 400 }
        }
      },
      title: {
        font: { size: 20, family: 'Palatino, Georgia, serif', weight: 400 }
      }
    },
    scales: {
      x: {
        ticks: {
          font: { size: 14, family: 'Palatino, Georgia, sans-serif', weight: 400 }
        }
      },
      y: {
        ticks: {
          font: { size: 14, family: 'Palatino, Georgia, sans-serif', weight: 400 }
        }
      }
    }
  };

  // Provide labels and chart data
  chart.data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [
      { label: 'Lap Time', data: [65, 59, 80, 81] },
      { label: 'Playtime', data: [12, 8, 15, 10] }
    ]
  };
</script>

Advanced customizations Jump to heading

For full control over chart configuration, use the options property. Options are deep-merged with the defaults, so you only need to specify what you want to override. 

<quiet-chart
  id="chart__advanced"
  label="Advanced customization example"
></quiet-chart>

<script>
  const chart = document.getElementById('chart__advanced');

  // Provide labels and chart data
  chart.data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Treats',
      data: [120, 190, 150, 250, 220, 300],
      tension: 0.4,
      fill: true
    }]
  };

  chart.options = {
    plugins: {
      title: {
        display: true,
        text: 'Treats Over Time',
        font: { size: 18 }
      },
      tooltip: {
        callbacks: {
          label: (context) => `${context.parsed.y.toLocaleString()} treats`
        }
      }
    },
    scales: {
      y: {
        ticks: {
          callback: (value) => `${value.toLocaleString()}`
        }
      }
    }
  };

  chart.type = 'line';
</script>

Accessing the Chart.js instance Jump to heading

Use the getChartInstance() method to access the underlying Chart.js instance instance for advanced manipulation.

Add Random Meow 
<div id="chart__instance">
  <quiet-chart
    chart-title="Live Meow Counter"
    label="Interactive bar chart tracking meow counts that updates when you click the button"
  ></quiet-chart>
  <quiet-button>Add Random Meow</quiet-button>
</div>

<script>
  const container = document.getElementById('chart__instance');
  const chart = container.querySelector('quiet-chart');
  const button = container.querySelector('quiet-button');

  // Provide labels and chart data
  chart.data = {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{ label: 'Meows', data: [10, 20, 15, 25, 30] }]
  };

  button.addEventListener('click', () => {
    const chartInstance = chart.getChartInstance();
    if (chartInstance) {
      const newLabel = String(chartInstance.data.labels.length + 1);
      const newValue = Math.floor(Math.random() * 50) + 10;

      chartInstance.data.labels.push(newLabel);
      chartInstance.data.datasets[0].data.push(newValue);
      chartInstance.update();
    }
  });
</script>

<style>
  #chart__instance {
    quiet-button {
      margin-block-start: 1rem;
    }
  }
</style>

Using Chart.js plugins Jump to heading

You can extend Chart.js functionality with plugins. Use the plugins property to apply plugins to a specific chart instance without affecting other charts. Configure plugin options through the options property.

This example uses chartjs-plugin-datalabels to display values directly on chart elements. 

<quiet-chart
  id="chart__datalabels"
  type="line"
  chart-title="Cat Activity Levels"
  label="Cat activity levels with data labels"
  min="0"
  max="40"
></quiet-chart>

<script type="module">
  import ChartDataLabels from 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2/+esm';

  const chart = document.getElementById('chart__datalabels');

  chart.plugins = [ChartDataLabels];

  chart.options = {
    plugins: {
      datalabels: {
        backgroundColor: context => context.dataset.backgroundColor,
        borderRadius: 4,
        color: 'white',
        font: {
          weight: 'bold'
        },
        padding: 6
      }
    },
    layout: {
      padding: {
        top: 32,
        right: 16,
        bottom: 16,
        left: 8
      }
    }
  };

  // Provide labels and chart data
  chart.data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Mr. Whiskers',
        data: [12, 25, 6, 34, 18],
        tension: 0.4,
        datalabels: { align: 'start', anchor: 'start' }
      },
      {
        label: 'Princess Fluff',
        data: [30, 15, 35, 10, 24],
        tension: 0.4
      },
      {
        label: 'Sir Pounce',
        data: [20, 36, 14, 20, 6],
        tension: 0.4,
        datalabels: { align: 'end', anchor: 'end' }
      }
    ]
  };
</script>

Global registration Jump to heading

To register a plugin globally so it applies to all charts, import the Chart object from the chart component and call Chart.register(). This must be done before any charts are created. 

import { Chart } from '/dist/components/chart/chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN Self-hosted

To manually import <quiet-chart> from the CDN, use the following code.

import 'https://cdn.quietui.org/v2.4.0/components/chart/chart.js';

To manually import <quiet-chart> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path. 

import '/path/to/quiet/components/chart/chart.js';

Properties Jump to heading

Chart has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute Description Reflects Type Default
label An accessible label for the chart. This is applied as an aria-label on the canvas element so assistive devices can announce it. The label is not visible—use chart-title if you want a visible title. You should always include both for the best user experience. string ''
type The type of chart to render. Valid types include bar, line, pie, doughnut, polarArea, radar, scatter, and bubble. ChartType 'bar'
data A Chart.js data object containing labels and datasets. Refer to the Chart.js docs for more details. ChartConfiguration['data']
undefined
options Full Chart.js options object - merged with defaults ChartConfiguration['options']
undefined
chartTitle
chart-title 		A visible title displayed above the chart. For an accessible label, use the label property instead. string ''
xLabel
x-label 		Label for the X-axis string ''
yLabel
y-label 		Label for the Y-axis string ''
indexAxis
index-axis 		Index axis - 'x' for vertical charts, 'y' for horizontal charts 'x'
'y' 		'x'
grid Which axes to show grid lines on. 'x'
'y'
'both'
'none' 		'both'
min Minimum value for the value axis number
undefined
max Maximum value for the value axis number
undefined
legendPosition
legend-position 		Legend position 'top'
'bottom'
'left'
'right' 		'bottom'
stacked Whether to stack datasets (for bar/line charts) boolean false
theme A color theme preset for the chart. Available themes are default, berry, blueprint, bright, earth, fire, forest, grayscale, ocean, pastel, sunset, and vintage. If the datasetColors property is also provided, it will take precedence over the theme. ChartThemePreset 'default'
datasetColors Custom dataset colors for light and dark modes. When provided, these colors are used instead of the theme colors. The appropriate color set is automatically selected based on the current color scheme. DatasetColors
undefined
plugins An array of Chart.js plugins to apply to this chart instance only. Plugins passed here will not affect other charts. For plugin configuration options, use the options.plugins property. Plugin[] []
withoutAnimation
without-animation 		Disables chart animations boolean false
withoutLegend
without-legend 		Hides the legend boolean false
withoutTooltip
without-tooltip 		Hides tooltips over data points boolean false

Methods Jump to heading

Chart supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name Description Arguments
getChartInstance() Returns the Chart.js instance for advanced manipulation. Refer to the Chart.js docs for more details.
refresh() Forces the chart to update and rerender. mode: 'none' <br> 'hide' <br> 'show' <br> 'default' <br> 'reset' <br> 'resize' <br> 'active'

CSS parts Jump to heading

Chart exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
canvas The canvas element where the chart is rendered. ::part(canvas)
Search this website Toggle dark mode View the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found