Center point labels between ticks (Polar Area Chart JS) - chart.js

Question

I'm using Chart JS in which I have a polar area chart (see image https://imgur.com/XedmesD) I want the point labels to be centered between the ticks. I have found solutions that only seem to work with bar charts that have an X and Y axis by using.
xAxes: [{
gridLines: {
offsetGridLines: true
}
]}
But this does not seem to work when using a polar area chart.
My code is
import React, { Component } from "react";
import Chart from "chart.js";
export default class OrdersFufilledChart extends Component {
OrdersFufilledChart = React.createRef();
componentDidMount() {
const OrdersFufilledChart = this.OrdersFufilledChart.current.getContext(
"2d"
);
new Chart(OrdersFufilledChart, {
type: "polarArea",
data: {
datasets: [
{
data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931","#57C5C8","#57C5C8","#57C5C8","#57C5C8","#57C5C8"],
borderWidth: 4,
hoverBorderColor: "white",
}
],
labels: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
},
options: {
responsive: true,
plugins: {
datalabels: {
display: false,
},
},
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 0,
},
scale: {
scaleLabel: {
display: true
},
ticks: {
max: 450,
maxTicksLimit: 1,
display: false,
},
angleLines: {
display: true
},
pointLabels: {
display: true
}
},
}
});
}
render() {
return (
<div>
<canvas
id="OrdersFufilledChart"
ref={this.OrdersFufilledChart}
width={360}
height={360}
/>
</div>
);
}
}
Any insight on how I can do this or pointers in the right direction will be greatly appreciated.
EDIT
I'm looking for something like this with the labels between inbetween.

Answer 1

What about using the datalabels-plugin for that?
I guess you saw my other answer where I used this plugin because your code has many similarities to mine.
I improved my code so it's responsive now. The labels are even animated. I don't share OP's concerns of the other question (offtopic: can somebody correct this genitive here? I know it's wrong...) with cluttered labels in this case because of the small 3-char-labels.
Complete code: https://jsbin.com/hamekugoja/2/edit?js,output
let myChart = new Chart(document.getElementById("pie-chart"), {
type: "polarArea",
data: {
datasets: [{
data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8"],
borderWidth: 4,
hoverBorderColor: "white",
}],
labels: [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
},
options: {
responsive: true,
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
anchor: 'start',
align: 'end',
offset: 0 // Gets updated
},
},
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 30,
},
scale: {
scaleLabel: {
display: true
},
ticks: {
max: 450,
maxTicksLimit: 1,
display: false,
},
angleLines: {
display: true
},
pointLabels: {
display: false
}
},
onResize: function() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
}
}
});
function updateOffset() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
myChart.update()
}
updateOffset() //init call after we know the dimensions of the chart

Answer 2

I've been playing around with the docs in chartjs, the only thing I was able to achieve is to center the ticks but the lines of the polar graph are hidden because of something white drawn around the ticks once they are drawn
Polar Charts have a single axis, this means it's a radial chart, there's a single axis th at maps points in the angular and radial directions, these is known as 'radial axes'.
I played with Linear Radial Axis docs from chartjs and was able to center the ticks, hope this may lead to anything helpful in your question
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<link id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'><link id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Crete Round' rel='stylesheet' type='text/css'><link id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Coming Soon' rel='stylesheet' type='text/css'><link id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'><link id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<script>
WebFontConfig = {
google:
{families: ["Open Sans","Crete Round","Coming Soon","Play","Cabin",]},active: function() {
DrawTheChart(ChartData,ChartOptions,"chart-01","PolarArea")}
};
</script>
<script asyn src="https://livegap.com/charts/js/webfont.js">
</script><script src="https://livegap.com/charts/js/Chart.min.js"></script>
<script>
function DrawTheChart(ChartData,ChartOptions,ChartId,ChartType){
eval('var myLine = new Chart(document.getElementById(ChartId).getContext("2d")).'+ChartType+'(ChartData,ChartOptions);document.getElementById(ChartId).getContext("2d").stroke();')
}
</script>
</head>
<body>
<canvas id="chart-01" width="500" height="500" style="background-color:rgba(255,255,255,1.00);border-radius:0px;width:500px;height:500px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px"></canvas>
<script> function MoreChartOptions(){} var ChartData = [{value :65,
color:'rgba(52,152,219,1)',title:'enero'},{value :8,color:'rgba(46,204,113,1)',title:'febrero'},{value :90,color:'rgba(166,107,190,1)',title:'marzo'},{value :81,color:'rgba(241,196,15,1)',title:'abril'},{value :56,color:'rgba(230,126,34,1)',title:'mayo'},{value :55,color:'rgba(192,58,43,1)',title:'junio'},{value :40,color:'rgba(141,68,173,1)',title:'julio'},];ChartOptions= {decimalSeparator:".",thousandSeparator:",",spaceLeft:12,spaceRight:12,spaceTop:12,spaceBottom:12,scaleLabel:"<%=value+''%>",yAxisMinimumInterval:'none',scaleShowLabels:false,scaleShowLine:false,scaleLineStyle:"solid",scaleLineWidth:1,scaleLineColor:"rgba(0,0,0,0.6)",scaleOverlay :false,scaleOverride :false,scaleSteps:10,scaleStepWidth:10,scaleStartValue:0,inGraphDataShow:true,inGraphDataTmpl:'<%=v2%>',inGraphDataFontFamily:"'Crete Round'",inGraphDataFontStyle:"normal normal",inGraphDataFontColor:"rgba(51,51,51,1)",inGraphDataFontSize:15,inGraphDataPaddingX:0,inGraphDataPaddingY:0,inGraphDataAlign:"center",inGraphDataVAlign:"middle",inGraphDataXPosition:2,inGraphDataYPosition:3,inGraphDataAnglePosition:2,inGraphDataRadiusPosition:3,inGraphDataRotate:0,inGraphDataPaddingAngle:0,inGraphDataPaddingRadius:15, inGraphDataBorders:false,inGraphDataBordersXSpace:1,inGraphDataBordersYSpace:1,inGraphDataBordersWidth:1,inGraphDataBordersStyle:"solid",inGraphDataBordersColor:"rgba(0,0,0,1)",legend:true,maxLegendCols:5,legendBlockSize:20,legendFillColor:'rgba(255,255,255,0.00)',legendColorIndicatorStrokeWidth:1,legendPosX:-2,legendPosY:4,legendXPadding:0,legendYPadding:0,legendBorders:false,legendBordersWidth:1,legendBordersStyle:"solid",legendBordersColors:"rgba(102,102,102,1)",legendBordersSpaceBefore:5,legendBordersSpaceLeft:5,legendBordersSpaceRight:5,legendBordersSpaceAfter:5,legendSpaceBeforeText:5,legendSpaceLeftText:5,legendSpaceRightText:5,legendSpaceAfterText:5,legendSpaceBetweenBoxAndText:5,legendSpaceBetweenTextHorizontal:5,legendSpaceBetweenTextVertical:5,legendFontFamily:"'Cabin'",legendFontStyle:"normal normal",legendFontColor:"rgba(0,0,0,1)",legendFontSize:15,showYAxisMin:false,rotateLabels:"smart",xAxisBottom:true,yAxisLeft:true,yAxisRight:false,graphTitleSpaceBefore:5,graphTitleSpaceAfter:5, graphTitleBorders:false,graphTitleBordersXSpace:1,graphTitleBordersYSpace:1,graphTitleBordersWidth:1,graphTitleBordersStyle:"solid",graphTitleBordersColor:"rgba(0,0,0,1)",graphTitle : "Gráfico Título",graphTitleFontFamily:"'Coming Soon'",graphTitleFontStyle:"normal normal",graphTitleFontColor:"rgba(52,152,219,1)",graphTitleFontSize:33,graphSubTitleSpaceBefore:-8,graphSubTitleSpaceAfter:3, graphSubTitleBorders:false,graphSubTitleBordersXSpace:1,graphSubTitleBordersYSpace:1,graphSubTitleBordersWidth:1,graphSubTitleBordersStyle:"solid",graphSubTitleBordersColor:"rgba(0,0,0,1)",graphSubTitle : "Añadir título sub aquí",graphSubTitleFontFamily:"'Play'",graphSubTitleFontStyle:"normal normal",graphSubTitleFontColor:"rgba(10,10,10,1)",graphSubTitleFontSize:14,scaleFontFamily:"'Open Sans'",scaleFontStyle:"normal normal",scaleFontColor:"rgba(0,0,0,1)",scaleFontSize:12,pointLabelFontFamily:"'Open Sans'",pointLabelFontStyle:"normal normal",pointLabelFontColor:"rgba(102,102,102,1)",pointLabelFontSize:12,angleShowLineOut:true,angleLineStyle:"solid",angleLineWidth:1,angleLineColor:"rgba(0,0,0,0.1)",percentageInnerCutout:50,scaleShowGridLines:true,scaleGridLineStyle:"solid",scaleGridLineWidth:1,scaleGridLineColor:"rgba(0,0,0,0.1)",scaleXGridLinesStep:1,scaleYGridLinesStep:3,segmentShowStroke:true,segmentStrokeStyle:"solid",segmentStrokeWidth:2,segmentStrokeColor:"rgba(255,255,255,1.00)",datasetStroke:true,datasetFill : true,datasetStrokeStyle:"solid",datasetStrokeWidth:2,bezierCurve:true,bezierCurveTension :0.4,pointDotStrokeStyle:"solid",pointDotStrokeWidth : 1,pointDotRadius : 3,pointDot : true,scaleTickSizeBottom:5,scaleTickSizeTop:5,scaleTickSizeLeft:5,scaleTickSizeRight:5,graphMin:0,barShowStroke : false,barBorderRadius:0,barStrokeStyle:"solid",barStrokeWidth:1,barValueSpacing:15,barDatasetSpacing:0,scaleShowLabelBackdrop :true,scaleBackdropColor:'rgba(255,255,255,0.75)',scaleBackdropPaddingX :2,scaleBackdropPaddingY :2,animation : true,onAnimationComplete : function(){MoreChartOptions()}};
DrawTheChart(ChartData,ChartOptions,"chart-01","PolarArea");</script></body></html>
Check out what I did on ticks:{}, and angeLines:{},
You might want to take a look at the docs, anyway tbh I think you'll have to go into New Axes and extend your polar chart to fulfill your needs.
Do you mind trying to use another chart generator? Try this