logo image
메인
기술
HOME
기술

[기본형] chartjs 기본 설정 코드

목록
#chartjs
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

        <script>
            Chart.defaults.font.size = 12;
            Chart.defaults.elements.line.borderWidth = 1;
            Chart.defaults.elements.bar.borderWidth = 0;
            Chart.defaults.elements.point.pointStyle = false;
           
            Chart.defaults.plugins.legend.labels.boxWidth = Chart.defaults.font.size;
            Chart.defaults.plugins.legend.labels.boxHeight = Chart.defaults.font.size;

            Chart.register(ChartDataLabels);
            Chart.defaults.plugins.datalabels.display = false; // 사용시 바꾸시오
            Chart.defaults.plugins.datalabels.font.size = 12;
            Chart.defaults.plugins.datalabels.color = '#fff';
            Chart.defaults.plugins.datalabels.textStrokeColor = '#000';
            Chart.defaults.plugins.datalabels.textStrokeWidth = 4;

        </script>

데이터 라벨 까지 기본 세팅 된 코드.
chartjs 는 항상 최신 버전으로 설정 됨.

목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
11.30
12.1
12.2
12.3
12.4
윈도우에서 wsl 설치
12.5
12.6
12.7
12.8
12.9
12.10
css color-mix()
12.11
ui-text-highlighter
12.12
12.13
12.14
12.15
12.16
12.17
12.18
12.19
12.20
12.21
12.22
12.23
12.24
12.25
12.26
12.27
12.28
12.29
12.30
12.31
1.1
1.2
1.3
tag