score:1
you can make line legend by changing width of legend box (for example 2px), it will be vertical line but it's looks nice too
plugins: {
legend: {
display: true,
labels: {
boxwidth: 2
}
}
}
score:2
just to improve on this solution from tektiv. if you want to show a dashed line too use this code in the same spot.
(chartjs 2.7.2 around line 16289):
if (opts.labels && opts.labels.usepointstyle) {
// chartjs code
} else if (opts.labels && opts.labels.uselinestyle) {
if (legenditem.borderdash) {
ctx.setlinedash(legenditem.borderdash);
}
ctx.beginpath();
ctx.moveto(x, y + fontsize / 2);
ctx.lineto(x + boxwidth, y + fontsize / 2);
ctx.stroke();
} else {
// chartjs code
}
score:12
i was able to use pointstyle: line
, in the dataset and then under options use labels: {usepointstyle: true,}
,
score:16
note: this solution only works if you have a local version of chart.js since it needs to edit a function in the source code of the library, which can't be done if you import it form a cdn.
to achieve what you want, you will need to edit the drawlegendbox
function (link to source here).
first, as if you wanted to do a pointstyle legend, add the uselinestyle
and set it to true
like this :
options: {
legend: {
labels : {
uselinestyle: true
}
}
}
then you need to go to your local version of chart.js (obvisouly, you cannot edit it if you import it from a cdn) and search for the function drawlegendbox
(on chart.js v2.2.1, it is roughly line 6460; in chart.js v2.9.4 search for labelopts && labelopts.usepointstyle
).
scroll down a little bit to see something like this :
if (opts.labels && opts.labels.usepointstyle) {
// recalulate x and y for drawpoint() because its expecting
// x and y to be center of figure (instead of top left)
var radius = fontsize * math.sqrt2 / 2;
var offset = radius / math.sqrt2;
var centerx = x + offset;
var centery = y + offset;
// draw pointstyle as legend symbol
chart.canvashelpers.drawpoint(ctx, legenditem.pointstyle, radius, centerx, centery);
}
// --- new condition goes here ---
else {
// draw box as legend symbol
ctx.strokerect(x, y, boxwidth, fontsize);
ctx.fillrect(x, y, boxwidth, fontsize);
}
and add this between the two conditions :
else if (opts.labels && opts.labels.uselinestyle) {
ctx.beginpath();
ctx.moveto(x, y + fontsize * 0.45);
ctx.lineto(x + boxwidth, y + fontsize * 0.45);
ctx.stroke();
}
with this edit, everytime you will set uselinestyle
to true, legend boxes will be drawn as lines, as the following screenshot :
Source: stackoverflow.com
Related Query
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart.js how to show cursor pointer for labels & legends in line chart
- Legends for line charts in Chart.js
- show label in tooltip but not in x axis for chartjs line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart.js - Line charts with different colors for each border lines
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to set chart.js grid color for line chart
- Multiple line labels for chart js
- Add a text as tooltip for each point on a line chart
- ChartJS, merge legends for multiple charts
- Background-color for area below line chart in chartJs?
- add info for points in line chart (js)
- Displaying line chart for multiple months using chart.js
- change space between horizontal (grid) lines for line chart
- Chart JS Crosshair - Linked Charts without linked Legends
- Empty circle - only point strok in line chart for ChartJS
- ChartJS Version 3 - common legend for multiple line charts
- ng2Charts/chart.js changing chart type for one is impacting many charts
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- How do you set x and y axis and Title for a line chart using charts.js?
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- Fetch more data for line chart onZoom/onPan issues
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Chartjs backgroundColor for line chart does not appear in Vue app
- Ng2 charts - Animation doesn't work on line chart onInit
- generate multiple charts via loop for chart js
- data in charts of charts.js is changing when I click in the line chart
More Query from same tag
- Why my buttons does not work?
- charts.js not loading in Django
- Why is pan (and zoom) not working on my Chart.js graph?
- Calling MouseLeave chartJs Angular
- Updating Chart.js Datasets - Array not re-initializing (Jquery / PHP)
- Unable to access data in collection for chart.js
- How to add data labels in each bar in stacked bar chart in chart.js?
- Chart.js drawing only in the top of canvas
- How to set the number of of rows in a line chart in chart.js?
- ChartJS 2 lines each with different fill gradients
- How to set Solid label in bar chart using Chart JS
- Add images inside bar chart in chart.js
- Change background color of label Chart.js
- How to fix chart not starting at zero
- Chart.js - Draw bar chart with multiple labels
- ChartJS - Moving vertical line is display on top of tooltip
- Data is not display in correct order after update
- chartjs: trying to rotate the y-Axis label
- chart.js : Not all points use defined colors
- Object.values not seperated by parentheses / Chartjs only displays first element of array
- Something similar to grace available in the latest chartJs for ChartJs 2.9.3
- Chartjs xaxis labels auto decrease disabled
- How to store a chart.js chart options in another file in AngularJS
- chart.js v2: Align time scale labels with the center of the bars
- ChartJS ticks values are not correct
- Chartjs and dynamic data arrays
- Error: $injector:modulerr Module Error - chart.js
- vue-chartjs how to load data
- ChartJS How to set max labels for X axis?
- I can't change the color of the grids in Chart.js