---
url: https://chartbuddy.io/embed/docs/samples/percent-axis.md
---
> Docs index: [llms.txt](https://chartbuddy.io/embed/docs/llms.txt)

# Sample: Percent axis

100% stacked bar with pinned 0–100 ticks every 25 and `%` postfix.

## Live preview

## Code

```html
<div id="chart" style="width:800px;height:480px"></div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  new Insight('#chart', {
    chartData: {
      chartType: 'stackedBar100',
      isDataTransposed: true,
      seriesData: [
        ['', 'Q1', 'Q2', 'Q3', 'Q4'],
        ['Product', 40, 42, 45, 48],
        ['Services', 35, 33, 32, 30],
        ['Other', 25, 25, 23, 22],
      ],
      title: { visible: true, text: 'Mix by quarter' },
      subtitle: { visible: false, text: '' },
      axes: {
        left: {
          labels: {
            preferredTickInterval: 25,
            customMin: 0,
            customMax: 100,
            numberFormat: {
              mode: 'custom',
              customFormat: {
                postfix: '%',
                decimalPlaces: 0,
                forceDecimals: false,
                thousandSeparator: ',',
                decimalSeparator: '.',
                signDisplay: 'auto',
                scaleDown: 0,
                prefix: '',
              },
            },
          },
          gridlines: { visible: true, dashArray: '' },
        },
      },
    },
  });
</script>
```

Docs: [Value axis](https://chartbuddy.io/embed/docs/axes/value-axis.md) · [By chart type](https://chartbuddy.io/embed/docs/axes/by-chart-type.md)