chartjs-plugin-annotationで線を追加できる。
Chart.jsのバージョン2.1.4では動作せず。
バージョン2.7.3で動作確認。

オプションに下記追加

annotation: {
  annotations: [{
    type:       'line',
    drawTime:   'afterDatasetsDraw',
    id:         'a-line-1',  //! 線ID
    mode:       'horizontal',//! 水平を指定
    scaleID:    'Yright',    //! 軸ID
    value:      10,          //! 始点数値
    endValue:   10,          //! 終点数値
    borderColor:'red',       //! 線色
    borderWidth:3,           //! 線幅
    borderDash: [2, 2],
    borderDashOffset: 1,
    label: {
      backgroundColor: 'rgba(255,255,255,0.8)',
      bordercolor: 'rgba(200,60,60,0.8)',
      borderwidth: 2,
      fontSize: 10,
      fontStyle: 'bold',
      fontColor: 'rgba(200,60,60,0.8)',
      xPadding: 10,
      yPadding: 10,
      cornerRadius: 3,
      position: 'left',//! 'center','right'
      xAdjust: 0,
      yAdjust: 0,
      enabled: true,
      content: 'ラベルテキスト'
    }
  }]
}
https://office7fuku.com/how-to-use-annotation-in-chartjs/
参考:オフィスナナフク

投稿者 blvd

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です