하이차트 연습

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

    <div id="container" ></div>

CSS

#container  {
  height: 360px;
  width: 800px;
  margin: 1em auto
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: '타이틀'
    },
    subtitle: {
        text: '서브타이틀'
    },
    yAxis : [
    { label : { style : {color:'red'}}},
    {
        title: {
            text: 'y축 타이틀',
            style : {color : 'red'}
        }},
       {title : {
           text: '두번째 y축'
        } ,
        opposite: true 
    }],

    xAxis: {
        title: {
        	text: 'x축 타이틀'
        }
    },
		
    /* 범례를 우측 세로로 정렬 */
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'middle'
    },
    tooltip: {
	valuePrefix: '$', //값 앞에 $를 표시
	valueSuffix: 'USD' //값 뒤에 USD를 표시
},   

    series: [{
        name: '범례 1',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        type: 'column'
    }, {
        name: '범례 2',
        yAxis: 1, 
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
        lineWidth:0, 
		states: {
			hover:{
				lineWidthPlus: 0 
			}
		}
    }, {
        name: '범례 3',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
        tooltip: {
				valueSuffix: 'KRW'
	}
    }],
        credits : {
      text: '네이버 나와라...ㅋ',
      href: 'https://www.naver.com/'
}
});