shinhansec_clone_coding/chart.js at main · gpdbs9409/shinhansec_clone_coding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
const ctx = document.getElementById('fundChart').getContext('2d');

const data = {
  labels: ['2025.04.28', '2025.05.01', '2025.05.08', '2025.05.13', '2025.05.18', '2025.05.21', '2025.05.23'],
  datasets: [{
    label: '수익률(%)',
    data: [0, 1.8, 3.1, -2.2, -6.0, -3.35, 0.5],
    borderColor: '#007bff',
    backgroundColor: 'rgba(0,123,255,0.08)',
    fill: true,
    tension: 0.3,
    pointRadius: 3,
    pointBackgroundColor: '#007bff',
    pointBorderColor: '#fff',
    pointHoverRadius: 5,
    pointHoverBackgroundColor: '#007bff',
    pointHoverBorderColor: '#fff',
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false },
      tooltip: {
        enabled: true,
        callbacks: {
          label: function(context) {
            return `수익률: ${context.parsed.y}%`;
          }
        }
      }
    },
    scales: {
      y: {
        min: -6,
        max: 4,
        ticks: {
          callback: function(value) {
            return value + '%';
          },
          color: '#888',
          font: { family: 'Noto Sans KR', size: 13 }
        },
        grid: { color: '#e5e5e5' }
      },
      x: {
        ticks: {
          color: '#888',
          font: { family: 'Noto Sans KR', size: 13 }
        },
        grid: { display: false }
      }
    }
  }
};

new Chart(ctx, config);