Center Point Labels Between Ticks (Polar Area Chart JS)


Answer :

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

Comments

Post a Comment

Popular posts from this blog

AspenTech InfoPlus 21 - How To Connect And Query Data

Image
Answer : InfoPlus21 is process historian containing list of templates of different tag structure e.g. IP_AnalogDef, IP_DescreteDef, IP_TextDef etc. Based on process tags from DCS/OPC/Any other historian, the IP21 records are created and each record acts as a table in historian. ANS1: Aspentech software is only windows based compatibility however IP21 aspenONE Process Explorer is web based and therefore you can access it over any operating system using host url. ANS2: you can try SELECT statement to get data from IP21 Historian using it's end-user component SQLPlus or on excel add-ins. e.g. SELECT NAME, IP_DESCRIPTION, IP_PLANT_AREA, IP_ENG_UNITS FROM IP_ANALOGDEF RESULTS: I hope this help you understand better. Otherwise you need to first learn the structure of your IP21 historian tags to build the query e.g. If it has customized structure, then you have to build your own. Welcome in industrial-IT ! For these technology, the best option is the 'AspenTech...
Read more

AngularJS $on Event Handler Trigger Order

Answer : Very good question. Event handlers are executed in order of initialization. I haven't really thought about this before, because my handlers never needed to know which one run first, but by the look of you fiddle I can see that the handlers are called in the same order in which they are initialized. In you fiddle you have a controller controllerA which depends on two services, ServiceA and ServiceB : myModule .controller('ControllerA', [ '$scope', '$rootScope', 'ServiceA', 'ServiceB', function($scope, $rootScope, ServiceA, ServiceB) {...} ] ); Both services and the controller define an event listener. Now, all dependencies need to be resolved before being injected, which means that both services will be initialized before being injected into the controller. Thus, handlers defined in the services will be called first, because service factories are initialized before contro...
Read more

ANALYZE TABLE..VALIDATE STRUCTURE Runs Forever

Answer : UPDATE: What Worked... So after reading the link from @Raj and reading @ora-600's answer I tried to validate the database with the RMAN command backup check logical validate database; . While this worked fine, it was also clear that it was not looking at everything that the ANALYZE INDEX command would. After trying many different variations, I finally discovered that this command would work: ANALYZE TABLE .. VALIDATE STRUCTURE CASCADE offline; Yep, just switching to OFFLINE appears to fix it. And that eventually led me to this bug# 5752105 on this page: http://www.eygle.com/case/10204_buglist.htm. I am not in a position to prove it right now (cannot apply any patches for the time being), but I strongly suspect that this is what I was running into. So while the question is not fully answered, I am going to mark @ora-600's very helpful answer as correct so that he can collect Paul White's very generous bounty. I think the article Raj quoted (https:...
Read more