# Votes by district (Chartist example)

> The results of each district as it reports: the slices and their labels turn to the new shares.

`src/main.ts`:

```ts
import 'chartist/styles.css';
import './style.css';
import { pieChart } from 'chartist';
import { liveDomRenderer, smilAnimations } from 'chartist/live';
import { firstCount, onCount, parties } from './count';

let votes = firstCount;
const total = () => votes.reduce((sum, value) => sum + value, 0);

const chart = pieChart(
  '#chart',
  { labels: parties, series: votes },
  {
    // Slices are known by their party, and turn to their new share.
    renderer: liveDomRenderer({ key: 'label', animations: smilAnimations() }),
    // Each slice shows its share.
    labelTransform: (label, index) =>
      `${label}\n${Math.round((votes[index] / total()) * 100)}%`
  }
);

// The next district's results.
onCount(count => {
  votes = count;
  chart.update({ data: { labels: parties, series: votes } });
});
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" class="ct-golden-section"></div>
  </body>
</html>
```

`src/count.ts`:

```ts
// The results of the districts as they report, from a seeded generator, so
// every run counts the same votes.

let seed = 3;
const random = () => {
  seed = (seed * 16807) % 2147483647;
  return (seed - 1) / 2147483646;
};

/** The parties, in the order of the slices. */
export const parties = ['Greens', 'Blues', 'Reds', 'Yellows'];

/** A district's votes by party: each district has a mood of its own. */
const district = () => parties.map(() => Math.round(50 + random() * 450));

/** The first district's votes. */
export const firstCount = district();

/** Calls `listener` with the next district's votes every 1.5 seconds. */
export function onCount(listener: (votes: number[]) => void) {
  setInterval(() => listener(district()), 1500);
}
```

`src/style.css`:

```css
/* White labels on the slices, in light and dark mode. */
#chart .ct-label {
  fill: #fff;
  color: #fff;
}
```