score:3
Yes, this is fairly simple actually. The chartjs-plugin-labels.js
file contains several lines which force the chart to become smaller when the label settings set the position to either "border"
or "outside"
. Download the script to your own server, comment out the lines below, and everything should work as expected. CodePen demo
Comment/remove these lines:
if (this.options.position === 'border') {
offset = (lines.length - 1) * this.options.fontSize / 2;
}
if (label.options.position === 'outside') {
someOutside = true;
var padding = label.options.fontSize * 1.5 + label.options.outsidePadding;
if (padding > maxPadding) {
maxPadding = padding;
}
}
Here is the updated JS file you can use: https://pastebin.com/raw/gSffqqKu
Just download it as chartjs-plugin-labels.js and use it in your project instead of the original plugin file.
Source: stackoverflow.com
Related Query
- Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- data in charts of charts.js is changing when I click in the line chart
- Is it possible to remove the border between the segments but leave the border around the pie chart in react-chartjs-2?
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- Displaying Legend only once when Several pie charts are drawn in the same page using chart.js
- Moving vertical line when hovering over the chart using chart.js
- Chart.js is it possible to fire javascript when clicking on point on the graph?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Can I use a gradient in Chart.js without accessing the chart context when the chart is created?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- How to achieve the best possible performance with mutable data and real-time charts in React?
- canvas fill text vanishes when hovering over chartjs pie chart
- Modify the labels in chart.js when I update the chart
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- how to show labels in laravel charts when the name of the label is on another table?
- Pie chart isn't loading, but the labels are
- Pie Chart shows up only when I zoom in-out
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- How can I show a subset of data on pie pieces in Chart.JS while still displaying the superset when hovering?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- Chart disappears, when pressing the submit button
More Query from same tag
- Why are the default Chart.js legend boxes transparent rectangles?
- Chartjs Polar Area Chart: Category missing
- Update data from server for ChartJS graph
- Update ChartJS with MySQL Data
- Angular-chartjs expression/value inside canvas class
- Using Chart.js in Web Worker
- ng2-charts & chart.js - Change background color
- ChartJS - Display one set of data at a time
- why i have this error Utils is not defined when i want create a chart from chart.js
- First point on scatter plot on JavaScript chart.js not showing
- Edge browser does not render chart using chart js
- show multiple responsive chart in the same page using chart.js
- How can I show extra data in chart.js tooltip?
- Min value of chart (Chart.js)
- How to add a vertical line on Chart.js when hover a point?
- How can I make line on chart thinner?
- Chart js different background for y axis
- Show percentage of category relative to stacked bar in Chart.js
- Angular2 Update ng2-charts with labels
- Chart.js, change color of specific ticks
- How Do I Properly Install/Access Javascript Library
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding
- How do I put this on Real-Time? I already put (async: True) but it doesnt work
- Error says Chart is not defined
- How can I change only a specific option in a chart with chart.js?
- Dynamically add x-axis in React using ChartJS
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- Chartjs fiddle not working
- How I connect chart.js to database in ASP.NET web form?
- How to disable a custom tooltip for a dataset in Chart.js line chart?