Line label option for line chart legends

Expected Behavior

I’d like to customize a legend for line data so that the legend graphic is a line (styled like the actual data line) rather than a box. Currently there is the usePointStyle option, maybe adding another one called useLineStyle to accomplish this? Example:

line legend:

Current Behavior

ChartJS legend label is a box with a fill and darker outline.


  • Chart.js version: 2.6.0
  • Browser name and version: Chrome 60

Author: Fantashit

9 thoughts on “Line label option for line chart legends

  1. Or perhaps adding the option to adjust the height of the box. Currently there is a boxWidth setting under legend label options, perhaps by setting boxHeight you could accomplish this? Maybe this should be a separate feature request in and of itself…

  2. This is the approach I used to cope with the issue. It works fine (for me) and avoids boxes larger than the fontSize to simplify the mathematics. The patch below was made against 2.7.2. The property is called boxHeight and sits next to the already existing boxWidth.


    I was not able to use the code tag (broken results) so I made the attachment.



Comments are closed.