[Jquery] Barchart 가로-세로 변환

var myBarChart3 = new Chart(ctx3, {
  **type**: 'bar',
  // type : 'horizontalBar',
  data: {
    labels: StasticsJSON.CustomQueryStat.TypeName.slice(0,5),
    datasets: [{
      label: "Count",
      backgroundColor: "#4e73df",
      hoverBackgroundColor: "#2e59d9",
      borderColor: "#4e73df",
      data: StasticsJSON.CustomQueryStat.TypeCount.slice(0,5),
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    **scales**: {
      **yAxes**: [{
        time: {
          unit: 'Count'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 10
        },
        maxBarThickness: 20,
      }],
      **xAxes**: [{
        ticks: {
          min: 0,
          max: 15000,
          maxTicksLimit: 5,
          padding: 10,
          callback: function(value, index, values) {
            return value;
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel +" : " + number_format(**tooltipItem.yLabel**);
        }
      }
    },
  }
});

type 옵션을 'bar' 와 'horizontalBar' 을 교체하는것으로 가로- 세로 전환이 가능하다.

그 다음, scales 의 xAxes와 yAxes 를 맞바꾸는것으로 x축과 y축을 서로 교체하고, tooltipItem.yLabel 을 tooltipItem.xLabel 로 ****바꾸면 그래프에 마우스를 올렸을때 나올 툴팁에 출력되는 숫자도 교체할 수 있다.