숫자는 한국식으로,
차트는 무료로.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@82chart/core@0.5.0/dist/cdn/82chart.css">
<script src="https://cdn.jsdelivr.net/npm/@82chart/core@0.5.0/dist/cdn/82chart.min.js"></script>

<div id="chart"></div>
<script>
  Chart82.createChart('#chart', {
    type: 'bar',
    title: '월별 매출',
    unit: '원',
    data: {
      labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
    },
  });
</script>

import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';

const chart = createChart('#chart', {
  type: 'bar',
  title: '월별 매출',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

chart.on('click', (point) => console.log(point.x, point.y));

import { Chart82 } from '@82chart/react';
import '@82chart/core/styles.css';

const data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};

export function SalesChart() {
  return (
    <Chart82
      type="bar"
      data={data}
      options={{ title: '월별 매출', unit: '원' }}
      onClick={(point) => console.log(point)}
    />
  );
}

<script setup>
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';

const data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: '월별 매출', unit: '원' };
</script>

<template>
  <Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template>

<script>
  import { Chart82 } from '@82chart/svelte';
  import '@82chart/core/styles.css';

  const data = {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
</script>

<Chart82 type="bar" {data} options={{ title: '월별 매출', unit: '원' }} />

import { Component } from '@angular/core';
import { Chart82Component } from '@82chart/angular';
import type { ChartData, ChartOptions, ChartPoint } from '@82chart/core';

@Component({
  selector: 'app-sales',
  standalone: true,
  imports: [Chart82Component],
  template: `<chart-82 type="bar" [data]="data" [options]="options" (pointClick)="onPoint($event)"></chart-82>`,
})
export class SalesComponent {
  data: ChartData = {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
  options: Partial<ChartOptions> = { title: '월별 매출', unit: '원' };
  onPoint(p: ChartPoint) { console.log(p); }
}
// angular.json → "styles": ["node_modules/@82chart/core/dist/styles.css"]

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@82chart/core@0.5.0/dist/cdn/82chart.css">
<script src="https://cdn.jsdelivr.net/npm/@82chart/core@0.5.0/dist/cdn/82chart.min.js"></script>

<chart-82
  type="bar"
  title="월별 매출"
  unit="원"
  data='{"labels":["1월","2월","3월"],"series":[{"name":"매출","data":[32000000,41000000,38500000]}]}'
></chart-82>