dataset에서 pointStyle을 설정해준다.
종류는 이렇게 있음
- 'circle'
- 'cross'
- 'crossRot'
- 'dash'
- 'line'
- 'rect'
- 'rectRounded'
- 'rectRot'
- 'star'
- 'triangle'
options - lengend에서 수정 usepointStyle = true
결과물
참고 코드
stackoverflow.com/questions/46439315/change-chartjs-legend-icon-style
Change Chartjs Legend Icon Style
I am trying change my Chartjs Icon legend style as shown from my screenshot. Is it possible ?
stackoverflow.com
| var data = { |
| labels: ['Value [mm]', ''], |
| datasets: [{ |
| label: "Hi-Hi Limit", |
| type: 'line', |
| data: [5432, 5432], |
| backgroundColor: 'rgba(250, 255, 255, 0)', |
| borderColor: 'rgba(255, 4, 0, 100)', |
| borderWidth: 3, |
| radius: 0, |
| pointStyle: 'line' |
| }, { |
| label: "Hi Limit", |
| type: 'line', |
| data: [5130, 5130], |
| backgroundColor: 'rgba(250, 255, 255, 0)', |
| borderColor: 'rgba(250, 255, 0, 100)', |
| borderWidth: 3, |
| radius: 0, |
| pointStyle: 'line' |
| }, { |
| label: "Lo Limit", |
| type: 'line', |
| data: [905, 905], |
| backgroundColor: 'rgba(250, 255, 255, 0)', |
| borderColor: 'rgba(250, 255, 0, 100)', |
| borderWidth: 3, |
| radius: 0, |
| pointStyle: 'line' |
| }, { |
| label: "Lo-Lo Limit", |
| type: 'line', |
| data: [604, 604], |
| backgroundColor: 'rgba(250, 255, 255, 0)', |
| borderColor: 'rgba(255, 4, 0, 100)', |
| borderWidth: 3, |
| radius: 0, |
| pointStyle: 'line' |
| }, { |
| type: 'line', |
| label: "Level", |
| data: [4800, 4800], |
| backgroundColor: 'rgba(0, 119, 220, 1)', |
| borderColor: 'rgba(0, 119, 220, 1)', |
| borderWidth: 1, |
| radius: 0, |
| pointStyle: 'rect' |
| }], |
| |
| }; |
| |
| var options = { |
| legend: { |
| position: 'right', |
| labels: { |
| usePointStyle: true |
| } |
| }, |
| scales: { |
| yAxes: [{ |
| gridLines: { |
| display: true, |
| color: "rgba(255,99,132,0.2)" |
| } |
| }], |
| xAxes: [{ |
| gridLines: { |
| display: false |
| } |
| }] |
| } |
| }; |
| |
| Chart.Bar('chart', { |
| options: options, |
| data: data |
| }); |
| body { |
| background: #1D1F20; |
| padding: 16px; |
| } |
| |
| .chart-container { |
| position: relative; |
| margin: auto; |
| height: 80vh; |
| width: 80vw; |
| } |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> |
| <div class="chart-container"> |
| <canvas id="chart"></canvas> |
| </div> |