score:7
spent an hour and still can't find the proper label padding options.
my workaround is padding the labels with newlines and spaces:
['行業競爭情況', ''],
['擁有專利', ''],
' 成本控制',
' 現金流',
['', '回本期'],
['', '營運能力'],
['', '行業潛力'],
'行業網絡 ',
'團隊經驗 ',
['計劃的完整性', ''],
make it auto if you wish:
scale: {
pointlabels: {
callback: function (label, i, labels) {}...
score:0
whenever my pr will be merged, pointlabels.padding
option will be added ;)
score:0
usually problem occurs with the first pointlabel
when it is single liner you can add the callback in options as follows
pointlabels: {
callback: function (label, index) {
/* hack to add spacing between first pointlabel item and radar graph */
return index == 0 && label.length == 1? [''].concat(label): label;
}
making pointlabel
multi line text solves the problem.
edit:
current version of chartjs
is 2.7.3
. upcoming version will probably solves this problem.
score:0
var pointlabelposition = scale.getpointposition(i, outerdistance + 5);
-> var pointlabelposition = scale.getpointposition(i, outerdistance + 15);
score:0
score:1
i use chart.js 2.6.0. i suffered from the same problem as you. i use only the radar type chart and amended as follows.
// chart.js v2.6.0
function adjustpointpositionforlabelheight(angle, textsize, position) {
console.log(position.y);
if (angle === 90 || angle === 270) {
position.y -= (textsize.h / 2);
} else if (angle > 270 || angle < 90) {
position.y -= textsize.h;
position.y -= 7; //add source
}
}
score:3
i have the same problem as described in the question and also was unable to find a solution using known chart options.
however, here is another workaround to achieve a behaviour similar to the desired padding (although not exactly):
ticks: {
display: false,
max: 11, // notice how this is +1 more than what you actually want
},
gridlines: {
display: true,
color: [
"#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
"#dddddd", "#dddddd", "#dddddd", "#dddddd", "#dddddd",
"transparent" ], // notice how the last (additional) line is set to transparent
},
anglelines: {
display: true,
color: "#dddddd",
},
the idea is to add one additional grid line with a transparent color. while this does not cause any padding between the pointlabels and the anglelines, it does cause there to be one gridline worth of space between the label and the next gridline. to me, this at least looks a little better.
note that this is only feasible if you do not need to display ticks (or if you are ok with your scale showing one additional tick value that you don't actually use).
Source: stackoverflow.com
Related Query
- Chart.js2 Radar, how to configure the label padding/spacing?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- PrimeNg bar chart how to show a label for the y-axis
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- how to label axis within radar chart with chart.js
- chart.js: How do I make the radar chart axis labels bigger?
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to scale label size radar chart chart.js
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to increase the spacing between labels and the chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How can I put my label on the right hand side of my chart in Chartjs
- How to configure chart.js line chart with very low minimum height, and only 0 and 1 (no decimals) as ticks on the y-axis
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- Chart js - Line chart - How to hide the data label on the line?
- Chart.js - How to Add Text in the label of the Chart with JavaScript?
- How to add text inside the doughnut chart using Chart.js?
- How do you hide the title of a chart tooltip?
- How to add text in centre of the doughnut chart using Chart.js?
- chart js tooltip how to control the data that show
- How to change the color of Chart.js points depending on the label
- Chart js. How to align text by the center of the tooltip?
- Chart JS show multiple data points for the same label
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to align Chart.JS line chart labels to the center
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to add padding to the vertical scale (X-axis) in Chart.js?
More Query from same tag
- Execute SQL prepared statement in AJAX
- Force display of ticks on xAxes using chartkick gem and chart.js
- Chartjs showing labels for bidimensional array
- Django - object is not subscriptable django charts.js" or nothing displays at all?
- return percentage in chart.js (v2+) legend
- ng2-charts - Tolltip color dont match line color
- Angular + Ng2 Charts: Chart not displaying as Child Component
- Chart.js Yaxis custom horizontal line and label
- Charts.js doughnut
- Chartjs chart with only one axis
- Chartjs remove text striking on legend
- How can I display the percentage symbol inside the chartjs?
- chart.data.datasets.push() also adds datasets to other charts in array
- Vertical spacing in horizontal ChartJS Bar Graph
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
- chartjs doesn't render dates properly
- Checkboxes unchecked after cart.js end of update animation
- How to show 2 populations types in one bar using chartjs?
- ChartJs Stacked Bar Chart
- Chart.js v2: How to make tooltips always appear on pie chart?
- Create bar chart with chart.js where space per bar is the same, overall chart size adjusted
- ChartJS custom bar chart
- how to Fill array with 0 if data is not present?
- Chart.js - Right use of object array
- Chart.js not rendering unless i set a timeout
- Plot multiple graphs (Chart.js) from php loop for reading multiple files
- How can I add vertical line and label for each point in Chart.js?
- Chart.js: chart does not update
- How to access all data in a function with ChartJs?
- chartjs-plugin-annotation box in Django app