vue-chartjs Options

chart.js 2.9.4와 vue-chartjs 3.5.1 버전을 사용하면서 옵션에 있는 항목들이 궁금해서 콘솔로 찍어서 작성함.

 

 - 콘솔에 찍은 방법

/* vue-chartjs */
options: {
  onClick: event => {
    console.log(this.$data._chart.options)
  }
}

/* chart.js */
options: {
  onClick: event => {
    console.log(this.$data.chart.options)
  }
}

 

 - 옵션 내용 ( 라인 차트 기준, 사용해 볼 때마다 업데이트 예정 )

/* 
 * 들어가는 옵션 종류를 적어놓은 것들은 맨 앞에 있는 것이 default 
 * ƒ ()는 function
*/

options: {
  animmation: {
    duration: 1000,
    easing: “easeOutQuart”,
    onComplete: ƒ (),
    onProgress: ƒ ()
  },
  datasets: {
    bar: {},
    horizontalBar: {},
    scatter: {},
  },
  defaultColor: “rgba(0, 0, 0, 0.1)”,
  defaultFontColor: “#666”,
  defaultFontFamily: “‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif”,
  defaultFontSize: 12,
  defaultFontStyle: “normal”,
  defaultLineHeight: 1.2,
  elements: {
    arc: {
      backgroundColor: “rgba(0, 0, 0, 0.1)”,
      borderAlign: “center”,
      borderColor: “#fff”,
      borderWidth: 2
    },
    line: {	/* 선 옵션 */
      backgroundColor: “rgba(0, 0, 0, 0.1)”, /* fill 색깔 */
      borderCapStyle: “butt”,	/* 선 마감: butt, round, square */
      borderColor: “rgba(0, 0, 0, 0.1)”,	/* 선 색깔 */
      bordertDash: [],
      borderDashOffset: 0,
      borderJoinStyle: “miter”,	/* 꺾이는 부분 모양: miter, bevel, round */
      borderWidth: 3,
      capBezierPoints: true,
      fill: true,	/* 선 밑 공간 색으로 채우기 */
      tension: 0.4
    },
    point: {	/* 표시자 옵션 */
      backgroundColor: “rgba(0, 0, 0, 0.1)”,
      borderColor: “rgba(0, 0, 0, 0.1)”,
      borderWidth: 1,
      hitRadius: 1,
      hoverBorderWidth: 1,
      hoverRadius: 4,
      pointStyle: “circle”,	/* circle, cross, corssRot, dash, line, rect, rectRounded, rectRot, start, triangle */
      radius: 3
    },
    rectangle: {
      backgroundColor: “rgba(0, 0, 0, 0.1)”,
      borderColor: “rgba(0, 0, 0, 0.1)”,
      borderSkipped: “bottom”,
      borderWidth: 0
    }
  },
  events: [
    “mousemove”,
    “mouseout”,
    “click”,
    “touchstart”,
    “touchmove”
  ],
  hover: {
    animationDuration: 400,
    axis: “x”,
    intersect: true,
    mode: “label”,
    onHover: null
  },
  layout: {
    padding: {
      bottom: 0,
      left: 0,
      right: 0,
      top: 0
    }
  },
  legend: {	/*  범례 설정 */
    align: “center”,
    display: true,
    fullWidth: true,
    labels: {
      boxWidth: 40,
      generateLabels: ƒ (chart),
      padding: 10,
      fontSize: 12,
      fontColor: "rgba(0, 0, 0, 0.6)"
    },
    onClick: ƒ (e, legendItem),
    onHover: null,
    onLeave: null,
    position: “top”,
    reverse: false,
    weight: 1000
  },
  legendCallback: ƒ (chart),
  maintainAspectRatio: false,	/* true시 가로, 세로 비율 유지 */
  onClick: ƒ onClick(event),
  plugins: {
    fillter: {
      propagate: true
    }
  },
  responsive: true,	/* 사이즈 자동 맞춤. 사이즈 고정시엔 false로 지정 */
  responsiveAnimationDuration: 0,
  scales: {
    display: true,
    xAxes: [
      {
        display: true,	/* xAxes 라벨 표시 */
        gridLines: {
           borderDash: [],
           borderDashOffset: 0,
           color: “rgba(0, 0, 0, 0.1)”,
           display: true,	/* xAxes의 gridLine 표시 */
           drawBorder: false,
           drawTicks: true,
           lineWidth: 1,
           offsetGridLines: false,
           tickMarkLength: 10,
           zeroLineBorderDash: [],
           zeroLineBorderDashOffset: 0,
           zeroLineColor: “rgba(0, 0, 0, 0.1)”,
           zeroLineWidth: 1
        },
        id: “x-axis-0”,
        offset: false,
        position: “bottom”,
        scaleLabel: {	/* xAxes의 서브타이틀 */
          display: false,
          labelString: “X축 입니다.”,
          padding: {
            bottom: 4,
            top: 4
          }
        },
        ticks: {
          autoSkip: true,
          autoSkipPadding: 0,
          beginAtZero: true,	/* 0부터 시작 */
          callback: ƒ (value),
          display: true,	/* xAxes 라벨 표시 */
          labelOffset: 0,
          major: {	/* 주 눈금. 생략된 옵션은 위의 옵션에서 상속 */
            /* major와 minor의 옵션이 같아서 여기에만 작성함. */
            callback: ƒ (),
            fontColor: "#666",
            fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
            fontSize: 12,
            fontStyle: "normal",
            lineHeight: 1.2
          },	
          maxRotation: 50,
          minRotation: 0,	/* xAxes 라벨 글씨 최소 기울기 */
          minor: {},	/* 보조 눈금. 생략된 옵션은 위의 옵션에서 상속 */
          padding: 0,
          reverse: false,	/* xAxes 순서 반대로 */
          fontSize: 12,
          fontColor: "rgba(0, 0, 0, 0.6)"
        },
        type: “category”
      }
    ],
    yAxes: [
      {
        display: true,	/* yAxes 라벨 표시 */
        gridLines: {
          borderDash: [],
          borderDashOffset: 0,
          color: “rgba(0, 0, 0, 0.1)”,
          display: true,	/* yAxes의 gridLine 표시 */
          drawBorder: false,
          drawOnChartArea: true,
          drawTicks: true,
          lineWidth: 1,
          offsetGridLines: false,
          tickMarkLength: 10,
          zeroLineBorderDash: [],
          zeroLineBorderDashOffset: 0,
          zeroLineColor: “rgba(0, 0, 0, 0.25)”,
          zeroLineWidth: 1
        },
        id: “y-axis-0”,
        offset: false,
        position: “left”,
        scaleLabel: {	/* yAxes의 서브타이틀 */
          display: false,
          labelString: “Y축 입니다.”,
          padding: {
            bottom: 4,
            top: 4
          }
        },
        ticks: {
          autoSkip: true,
          autoSkipPadding: 0,
          beginAtZero: true,	/* 0부터 시작 */
          callback: ƒ (tickValue, index, ticks),
          display: true,	/* yAxes 라벨 표시 */
          labelOffset: 0,
          major: {},	/* 주 눈금. 생략된 옵션은 위의 옵션에서 상속 */
          maxRotation: 50,
          minRotation: 0,	/* yAxes 라벨 글씨 최소 기울기 */
          minor: {},	/* 보조 눈금. 생략된 옵션은 위의 옵션에서 상속 */
          mirror: false,
          padding: 0,
          reverse: false,	/* yAxes 순서 반대로 */
          fontSize: 12,
          fontColor: 'rgba(0, 0, 0, 0.6)'
        },
        type: “linear”
      }
    ]
  },
  showLines: true,	/* point를 잇는 Line 화면 출력 유무 */
  spanGaps: false,
  title: {
    display: true,
    fontStyle: “bold”,
    fullWidth: true,
    padding: 10,
    position: “top”,
    text: “Title Text”,
    weight: 2000
  },
  tooltips: {
    axis: “xy”,
    backgroundColor: “rgba(0, 0, 0, 0.8)”,
    bodyAlign: “left”,
    bodyFontColor: “#fff”,
    bodySpacing: 2,
    borderColor: “rgba(0, 0, 0, 0)”,
    borderWidth: 0,
    callbacks: {
      afterBody: ƒ (),
      afterFooter: ƒ (),
      afterLabel: ƒ (),
      afterTitle: ƒ (),
      beforeBody: ƒ (),
      beforeFooter: ƒ (),
      beforeLabel: ƒ (),
      beforeTitle: ƒ (),
      footer: ƒ (),
      label: ƒ (tooltipItem, data),	/* 툴팁 표시 내용 커스텀을 위해 사용했음 */
      labelColor: ƒ (tooltipItem, chart),
      labelTextColor: ƒ (),
      title: ƒ (tooltipItems, data)
    },
    caretPadding: 2, 
    caretSize: 5,	/* 툴팁 박스의 화살표 크기 */
    cornerRadius: 6,
    custom: null,
    displayColor: true,
    enabled: true,	/* 툴팁 사용 유무 */
    footerAlign: “left”,
    footerFontColor: “#fff”,
    footerFontStyle: “bold”,
    footerMarginTop: 6,
    footerSpacing: 2,
    intersect: true,	/* true시 hover로 툴팁 보여줌, false시 click시 툴팁 보여줌 */
    mode: “nearset”,
    multiKeyBackground: “#fff”,
    position: “average”, 
    titleAlign: “left”,
    titleFontColor: “#ffff”,
    titleFontStyle: “bold”,
    titleMarginBottom: 6,
    titleSpacing: 2,
    xPadding: 6,
    yPadding: 6
  }
}