맨위로가기
 

SBCHART

닫기

CSS classes

#2.0.0

CSS 클래스입니다.
chart, title, axis, legend, grid, tooltip 등 차트 내 각 영역 별로 classes 가 정의되어 있습니다.

chart

  • .sbchart-chart-svg : 차트의 최상위 svg 영역    #2.0.38
  • .sbchart-chart : x, y축 라벨, 타이틀을 제외한 순수 영역    #2.0.0
  • .sbchart-series : Series 영역    #2.0.0
  • .sbchart-labels : Data Labels 영역    #2.0.0
  • .sbchart-no-data : 데이터가 없을 때의 차트 영역    #2.0.16

title

  • .sbchart-title : 타이틀 최상위    #2.0.0
  • .sbchart-title { font-size: 16px; font-weight: bold; }	/* 타이틀 폰트 사이즈 변경 */
    .sbchart-title { fill: #595959; }	/* 폰트 색 변경 */
    

axis

  • .sbchart-axis : x, y축 공통. #2.0.0
  • .sbchart-axis-x : x축 최상위. #2.0.0
  • .sbchart-axis-x .tick text : x축 tick 텍스트. #2.0.0
  • .sbchart-axis-x .tick line : x축 tick 라인. #2.0.0
  • .sbchart-axis-x .domain : x축 선. #2.0.0
  • .sbchart-axis-x-label : x축 라벨. #2.0.0
  • .sbchart-axis-y : y축 최상위 클래스. #2.0.0
  • .sbchart-axis-y .tick text : y축 tick 텍스트. #2.0.0
  • .sbchart-axis-y .tick line : y축 tick 라인. #2.0.0
  • .sbchart-axis-y .domain : y축 선. #2.0.0
  • .sbchart-axis-y-label : y축 라벨. #2.0.0
  • .sbchart-axis-y2 : y2축 최상위 클래스. #2.0.17
  • .sbchart-axis-y2 .tick text : y2축 tick 텍스트. #2.0.17
  • .sbchart-axis-y2 .tick line : y2축 tick 라인. #2.0.17
  • .sbchart-axis-y2 .domain : y2축 선. #2.0.17
  • .sbchart-axis-y2-label : y2축 라벨. #2.0.17
  • .sbchart-axis-x .tick text { font-size: 13px; } /* x축 tick 폰트 크기 변경 */
    .sbchart-axis-y .tick text { fill: #aaaaaa; }	/* x축 tick 글자 색 변경 */
    .sbchart-axis-x .tick line { display: none; }	/* x축 tick 라인(눈금) 없애기 */
    .sbchart-axis-x .domain { display: none; }	/* x축 선 없애기 */
    .sbchart-axis-x .sbchart-axis-x-label { font-size: 14px; }	/* x축 라벨 폰트 크기 변경 */
    

legend

  • .sbchart-legend : 범례 최상위. #2.0.0
  • .sbchart-legend-background : 범례 배경. #2.0.0
  • .sbchart-legend-item : 범례 아이템. #2.0.0
  • .sbchart-legend-item-text : 범례 아이템 텍스트. #2.0.0
  • .sbchart-legend-item-tile : 범례 아이템 Tile. #2.0.0
  • .sbchart-legend-background { stroke-width: 0; } /* 범례 박스 라인 없애기 */
    .sbchart-legend-background { fill: #f2f2f2; }	/* 범례 배경색 정의 */
    .sbchart-legend-item { font-size: 14px; } /* 범례 텍스트 폰트 크기 변경 */
    

grid

  • .sbchart-grid : 그리드 x, y축 공통. #2.0.0
  • .sbchart-grid-x : 그리드 x축 최상위. #2.0.0
  • .sbchart-grid-x .sbchart-grid-x-line : 그리드 x축 라인. #2.0.0
  • .sbchart-grid-y : 그리드 y축 최상위. #2.0.0
  • .sbchart-grid-y .sbchart-grid-y-line : 그리드 y축 라인. #2.0.0

tooltip

  • .sbchart-tooltip : 툴팁 영역. #2.0.0
  • .sbchart-tooltip-title : 툴팁의 제목 영역. #2.0.0
  • .sbchart-tooltip-cont : 툴팁의 콘텐츠 영역. #2.0.0

기타

  • .sbchart-arcs-title : 도넛 차트의 내부 타이틀 영역 #2.0.4
  • .sbchart-arcs-gauge-value : 게이지 차트의 값 #2.0.4
  • .sbchart-arcs-gauge-min : 게이지 차트의 최솟값 #2.0.4
  • .sbchart-arcs-gauge-max : 게이지 차트의 최댓값 #2.0.4
  • .sbchart-arcs-gauge-unit : 게이지 차트의 단위 영역 #2.0.4
  • .sbchart-radar-axis : 레이더 차트의 축 영역 #2.0.14
  • .sbchart-radar-axis .sbchart-radar-axis-line : 레이더 차트의 축의 라인 #2.0.14
  • .sbchart-radar-axis .sbchart-radar-axis-label : 레이더 차트의 축의 라벨 #2.0.14
  • .sbchart-radar-level : 레이더 차트의 레벨 영역 #2.0.14
  • .sbchart-radar-level .sbchart-radar-level-line : 레이더 차트의 레벨의 라인 #2.0.14
  • .sbchart-radar-level .sbchart-radar-level-label : 레이더 차트의 레벨의 라벨 #2.0.14