score:0
If you read the documentation of chartjs about legend:
usePointStyle
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
So just by adding:
...
labels: {
fontSize: 2,
usePointStyle:true,
}
...
JSFiddle with the modified size
You get the size of the legend points smaller.
Maybe I understood you wrong, if so leave a comment and I will modify my answer to fit the new question
score:5
You can use the boxWidth
option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
Looking at the chartjs code (version 2.8), boxWidth
is used as long as it is smaller than fontSize
. fontSize
is used as it gets larger than boxWidth
.
Source: stackoverflow.com
Related Query
- Change Radius/Point size of Legend Points in chart.js when usePointStyle is true
- Angular 2 chart - change point radius
- Change size of a specific point on a line chart in Chart.js
- how to change point style legend to diamond in chart js
- how to change size of point in ChartJS
- Change point size and color on hover in chartjs
- Change size of bubble radius without changing r value
- Chart.js Radar chart legend label font size doesn't work
- Chart.js Show label/tooltip for single point when multiple points coincide
- Increase point radius when tootip shown for certain data on Charts.js
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- change legend item style when dataset is hidden
- chart.js change size of label of radar chart
- Highlight chart element when hovering over its corresponding legend Item
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Change dot size individually Scatter Chart -- ChartJS
- Chart js custom separate legend returns error when clicking legend
- Chartjs does not render chart when set responsive option to true
- Angular-Charts bar chart does not update when I change the data, series, labels
- How to show/hide animation when legend clicked chart js
- ChartJS Bar Chart not respecting disabled legend when using cdn
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- VueJS + Chartjs - Chart only renders after code change
- ChartJS - Size of the point doesn't change
- chart does not change the values when the variable changes the value
- How to change chart background colour when exporting to PDF with chart.js
- Chart.js how to change point radius of scatter charts on resize events?
- Chart.js - Line chart does not render all points when using Point[] format
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
More Query from same tag
- can't set ChartJS canvas width
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Chart.js - remove zeros and step numbers in Y axis
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- How to load a chart in a diferent page
- Chartjs line graph dataset with offset
- How can I add an event to chart.js legend?
- ChartJS - Show percentage base on data on hover (AngularJS)
- Chart.js Radar chart legend label font size doesn't work
- How implement Chart.js in Angular 2?
- Y-axis scale uneven
- Reloading ChartJs Image
- Chart.js animate chart after clicking a button
- Javascript : import produces a syntax error
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- In chart.js, how to know if a yAxes tick is bumping/rendering over/into another
- How to underline and bold tooltip chart js
- Chart Js Show the old data on mouse hover
- Issue with HTML2Canvas - Green overlay while exporting
- Chart.JS Get Json data for chart and return dataset where a type equals a certain type
- how to set a custom tick format in chartjs options from laravel controller?
- date and time chart With Chart js
- How can I get chart.js to automatically add colours for dynamic labels?
- Use Ternary Option with Chart.js and AngularJs
- Add percentage to label badge - doughnut chart.js
- End x-axis on last data point (scatter plot) for x,y numeric values
- How to convert chart.js library chart to image in pure node.js without using HTML and CSS?
- Combine Chart.js programmatic and legend based dataset toggling
- Getting nice chart.js animation when adding data with unshift()?
- Django Time Series with Chart JS