[Chartjs]-Center point labels between ticks (Polar Area Chart JS)

by

3👍

✅

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

0👍

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

Leave a comment