# Getting started
> Your first chart in about two minutes. No build step, no bundler, no framework. An HTML file and a browser.
> **Works without a bundler.** Chartist ships as a native ES module, so a `
```
## Open it in a browser
That's it. Here's the whole file, ready to save as `index.html`:
```html
My first chart
```
And this is what it draws, live. Press **Edit** and change a number. The editor knows Chartist's types: point at a name to read what it takes, press Ctrl+Space for suggestions, and a mistake gets a red underline before you run it.
**My first chart** (runs in the browser):
`src/main.ts`:
```ts
import 'chartist/styles.css';
import { lineChart } from 'chartist';
lineChart('#chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3]
]
});
```
`index.html`:
```html
```
## Import Chartist by name
An import map tells the browser where `chartist` lives, so your code can import it by name, just like with npm. The same code then moves to a bundler unchanged, and plugins that import `chartist` find it too:
```html
```
The import map goes before the first module script. `chartist/compat` is only needed if you use the [1.x compatibility](https://chartist.dev/docs/coming-from-1x/); it shares the core of the `chartist` entry, since `compat.min.js` imports `index.min.js` next to it.
## Using npm
Same API, installed from npm. It works with Vite, webpack, Rollup, esbuild and Astro, and it's written in TypeScript, so the types come with it.
```sh
npm install chartist@next
```
```ts
import 'chartist/styles.css';
import { barChart } from 'chartist';
barChart(
'#chart',
{
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
series: [
[5, 4, 3, 7],
[3, 2, 9, 5]
]
},
{ stackBars: true }
);
```
Chartist only adds what you import to your bundle, so a single line chart stays small.
## Make it yours with CSS
There's no theme option. Charts are SVG with predictable classes, so you style them the way you style everything else. Custom properties cover the common cases, for the whole page, one container or one chart:
```css
#chart {
--ct-series-a: #0544d3; /* first series */
--ct-line-width: 2px;
--ct-grid-dasharray: none;
}
```
> **Coming from Chartist 1.x?** Your code keeps working: the chart classes are
> still there, and your charts look exactly the same. [Coming from
> 1.x](https://chartist.dev/docs/coming-from-1x/) shows how to move to the functions, one chart at a
> time.
## Where to next
- Pick your chart: [line](https://chartist.dev/docs/line-charts/), [bar](https://chartist.dev/docs/bar-charts/), [pie and donut](https://chartist.dev/docs/pie-and-donut-charts/), or [bars and lines together](https://chartist.dev/docs/composed-charts/).
- Shape your data and options: [Data and options](https://chartist.dev/docs/data-and-options/), [Sizing charts](https://chartist.dev/docs/sizing-charts/).
- Make it yours: [Styling with CSS](https://chartist.dev/docs/styling-with-css/), then [Responsive sugar topping](https://chartist.dev/docs/responsive/).
- Wondering whether Chartist fits? [Why Chartist?](https://chartist.dev/docs/why-chartist/) says what it's made for, and what it leaves to you.