250x250
syk531
하루
syk531
전체 방문자
오늘
어제
  • 분류 전체보기 (166)
    • 개발 (166)
      • java (11)
      • kotlin (7)
      • spring, spring boot (35)
      • Javascript (4)
      • Tyhmeleaf (2)
      • Kafka (17)
      • Docker (8)
      • Kubernetes (3)
      • Elastic Stack (4)
      • react native (3)
      • Web (4)
      • GIS (3)
      • 리눅스 (16)
      • Windows (2)
      • 네트워크 (2)
      • 안드로이드앱 (5)
      • git (2)
      • Tool (15)
      • 프로젝트 (7)
      • 백준알고리즘 (14)
      • DB (2)

인기 글

최근 글

블로그 메뉴

    공지사항

    태그

    • 뉴스앱
    • 티스토리챌린지
    • 오블완

    최근 댓글

    티스토리

    hELLO · Designed By 정상우.
    syk531

    하루

    [chartjs] 축 시작값, 최대값 설정 방법
    개발/Javascript

    [chartjs] 축 시작값, 최대값 설정 방법

    2024. 4. 11. 15:37
    728x90
    반응형

    chartjs를 사용해서 프론트에서 날짜별 건수를 chart로 보여주는데 아래와 같이 날짜별로 건수가 0건일때 -1(음수)가 y축에 보였습니다. 

    건수가 마이너스가 될수는 없기 때문에 시작 위치를 0으로 하기 위해서 beginAtZero: true 를 추가했습니다.

    시작 위치는 0으로 변경되었지만 y축에 0.5가 표시되는데 건수는 소수점이 나올수 없기 때문에 suggestedMax: 2를 추가해서 최대값을 설정했습니다.

    y축이 최대값까지 표현되고 건수가 존재할때는 최대값을 무시하고 그려집니다.

     

    y축 설정 소스

    yAxis: {
        grid: {
            display: false
        },
        ticks: {
            maxTicksLimit: 4
        }
        ,beginAtZero: true
        ,suggestedMax: 2
    }
    728x90
    반응형
    저작자표시 (새창열림)

    '개발 > Javascript' 카테고리의 다른 글

    Javascript로 Div 태그 드래그 이동 기능 구현  (0) 2025.01.24
    Axios 라이브러리 특징 및 사용법  (0) 2023.11.28
    Template literal(템플릿 리터럴) If문 사용  (0) 2023.08.20
      '개발/Javascript' 카테고리의 다른 글
      • Javascript로 Div 태그 드래그 이동 기능 구현
      • Axios 라이브러리 특징 및 사용법
      • Template literal(템플릿 리터럴) If문 사용
      syk531
      syk531
      기억을 위해 기록을.

      티스토리툴바