메리

y축 그리드 커스텀 설정, 옵션 (valueAxis)

1. valueAxis 생성

//valueAxis 생성
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

2. 최대/최소 (min, max)

// 최대,최소 설정. 미설정시 주어진 데이터 범위 내에서 알아서 보기좋게 생성함
valueAxis.min = 0;
valueAxis.max = 100;

3. 최대/최소 (strictMinMax)

//min, max를 미설정한경우 데이터의 최소/최대값을 y축 그리드의 최소/최대값으로 지정함
//썩 보기 좋지 않다. 미설정시 기본값은 false인듯.
valueAxis.strictMinMax = true;

4. 뒤집기(inversed)

//오름차순, 내림차순 설정. 미설정시 false.
//true 설정 시 y축 그리드 위아래가 뒤집힘
valueAxis.renderer.inversed = true;

5. inside

//y축 라벨이 표 안으로 들어옴
valueAxis.renderer.inside=true;

6. 라벨 숨김(minLabelPosition)

//최소값 라벨 숨김 설정
//0.01 = y축 전체 길이의 1%에 해당하는 부분
valueAxis.renderer.minLabelPosition = 0.01;

7. 투명도(strokeOpacity)

//y축 획의 투명도
//미설정시 기본 0인듯하며 1 설정시 불투명함
valueAxis.renderer.line.strokeOpacity = 1;

8. 두께 (strokeWidth)

// y축 획의 두께
valueAxis.renderer.line.strokeWidth = 2;

9. 표시 위치(opposite)

//y축 획 표시 위치.
//미설정시 기본 왼쪽, true 설정시 오른쪽
valueAxis.renderer.opposite = true;

10. 글자 색(label fill)

//y축 라벨 글자 색 
valueAxis.renderer.labels.template.fill = "#ffa200";

11. 선 색 (line stroke)

//y축 획의 색
valueAxis.renderer.line.stroke = "#ffa200";

12. y축 그리드 간격 (minGridDistance)

//y축 그리드의 최소간격
valueAxis.renderer.minGridDistance = 30;

13. 범례 표시 (title)

valueAxis.title.text="percentage";

시리즈에 적용하기

 series.yAxis = valueAxis;

여러개의 시리즈를 생성할 때

여러개의 y축을 사용하고 싶은경우 

시리즈 생성할때마다 valueAxis를 생성해주면 된다