[kendo ui] 차트 valueAxes 라벨 위치 지정 하기

켄도 Chart X축[valueAxis] 이름 원하는 곳에 위치하도록 하는 방법

켄도 ui의 차트를 사용할때 X축의 valueAxes 라벨 위치를 변경 하고 싶은 때가 있다.

물론 포지션이라는 명령어로 간단한 위치 지정은 할 수 있지만 UI를 구성하다보면 라벨의 위치를

정확히 원하는 장소에 위치 하게 하고 싶을때가 있다.

방법을 알아보자

 
$("#chart").kendoChart({
    title: {
        text: "Gross domestic product growth \n /GDP annual %/"
    },
    legend: {
        position: "bottom"
    },
    chartArea: {
        background: ""
    },
    seriesDefaults: {
        type: "line",
        style: "smooth"
    },
    series: [{
        name: "India",
        data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    },{
        name: "World",
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    },{
        name: "Russian Federation",
        data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
    },{
        name: "Haiti",
        data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
    }],
    valueAxis: {
        labels: {
            format: "{0}%"
        },
        title: {
            text: unit,
            margin: {
                bottom: 20,
                top:-35,
                right:-20
              },
              position:'top',
              rotation: 0
          },
        line: {
            visible: false
        },
        axisCrossingValue: -10
    },
    categoryAxis: {
        categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
        majorGridLines: {
            visible: false
        },
        labels: {
            rotation: "auto"
        }
    },
    tooltip: {
        visible: true,
        format: "{0}%",
        template: "#= series.name #: #= value #"
    }
});

위와 같이 코딩했을때 X축 라벨의 위치를 지정해 주는 곳은 ValueAxis 를 설정하는 곳에 있는

title: {

            text: unit,

            margin: {

                bottom: 20,

                top:-35,

                right:-20

              },

              position:'top',

              rotation: 0

          },

이 부분이다. 포지션으로 탑을 주고 그 상태에서

마진을 이용해 위아래 양옆의 위치를 지정해 줄 수 있다.

위와 같이 하면

켄도 차트의 X축 이름을 원하는 위치에 마음대로 지정 할 수 있게 된다.