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
- Remove bullet points from chart.js legend
- Chart.js coming up as blank
- How to make data always visible on bars Chart.js
- Vue-chartjs not rendering chart until page resize
- Weird time formating with chart.js and moment.js
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- How do I implement Laravel Analytics with Chart.js
- Chart JS Dynamic number of datasets
- Chart.js how define max tick of polarArea?
- Chart JS Tooltip - place it in a fixed location outside the canvas
- Getting nice chart.js animation when adding data with unshift()?
- How to set max and min value for Y axis
- Is it possible to display the yAxis as a percentage without modifying my datasets for a Line chart?
- react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?
- Filter/update already rendered chart.js in react.js
- Do not draw line on condition in ChartJS line chart
- how to use chart.js with react Hook?
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- How to add comma in this chart js
- Update Chart JS with date range selector
- ngx-charts-advanced-pie-chart is reading my rest api response as null
- How can I make bar charts symmetrical in chart.js?
- tc-angular-chartjs problems while assigning value to chart-data
- Disable or hide YAixs of chart in chartJs
- Chart load time and animation slow on mobile device
- chart labels didn't shows in chartjs
- 'filter' function for chart.js legend labels never being called
- Could not find elementById on mat-card-content
- Chart JS can't access data from array within an object
- Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels