tag:blogger.com,1999:blog-2563180596812825704.post6354199458577688870..comments2024-03-20T11:41:12.794-07:00Comments on Forcetrails: Bar Chart In Lightning Web Component Using ChartjsRahul Gawalehttp://www.blogger.com/profile/17790026688078884559noreply@blogger.comBlogger48125tag:blogger.com,1999:blog-2563180596812825704.post-2973870398431866092023-09-14T09:58:38.311-07:002023-09-14T09:58:38.311-07:00Hi Bernardo, Good day, can you please share your r...Hi Bernardo, Good day, can you please share your relevant code snippets so that I can check what is the issue with the code? Please post the GitHub link or you can send it to me at rahul@forcetrails.comRahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-10411449795082209952023-09-14T08:51:20.563-07:002023-09-14T08:51:20.563-07:00Hi Rahul!
I couldn't pass the Apex class List...Hi Rahul!<br /><br />I couldn't pass the Apex class List values (correctly obtained according to the developer console's log) to the JS file (data appears as an array with the proper number of records, but each record is empty!). The chart displays only null values...Bernardohttps://www.blogger.com/profile/01941870910571910236noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-72469599998659196942023-07-09T08:07:13.995-07:002023-07-09T08:07:13.995-07:00Hi Renu, in that case you need to use logarithmic ...Hi Renu, in that case you need to use logarithmic scale instead of linear scale. Also try to explore the options in chart js scale configurations.Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-20321330840734714592023-07-03T22:45:52.575-07:002023-07-03T22:45:52.575-07:00 Hi,I noticed an issue with the displayed graph wh... Hi,I noticed an issue with the displayed graph where one data value is significantly larger (2147) compared to the other (2). Due to the large difference in scale, the lower value might not be visually represented in the graph. and if the value is zero xaxis the graph ranges from (-5 to +5) in yaxis .Renuhttps://www.blogger.com/profile/00230011921698509139noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-10188469022469062202023-07-03T22:43:46.768-07:002023-07-03T22:43:46.768-07:00 Hi,I noticed an issue with the bar graph where on... Hi,I noticed an issue with the bar graph where one data value is significantly larger (2147) compared to the other (2). Due to the large difference in scale, the lower value might not be visually represented accurately in the graph. how can i fix this issue? is there any option to adjust the axes of the graph ? if there is no value ,graph ranges from negative to positive (-5 to +5 in Yaxis) .Renuhttps://www.blogger.com/profile/00230011921698509139noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-9346578670025885572023-01-31T07:58:58.361-08:002023-01-31T07:58:58.361-08:00Only the difference is the version of chart js, fo...Only the difference is the version of chart js, for that you need to check if it works with lwc. Some of the features were not working because of lightning locker, but you can definitely give it a try with latest version of chartjsRahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-60250329719919352582023-01-31T07:58:14.849-08:002023-01-31T07:58:14.849-08:00Only the difference is the version of chart js, fo...Only the difference is the version of chart js, for that you need to check if it works with lwc. Some of the features were not working because of lightning locker, but you can definitely give it a try with latest version of chartjsRahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-47450080497010064912023-01-30T12:21:46.082-08:002023-01-30T12:21:46.082-08:00What is the difference between
https://cdnjs.clou...What is the difference between <br />https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js From W3schools and <br />https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min ?<br /><br />Can your code use the Chart.js library from W3, or is there more stuff in the "this ChartJS" download?Mikehttps://www.blogger.com/profile/09168671631131435160noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-62486994826567931872022-06-10T22:42:11.989-07:002022-06-10T22:42:11.989-07:00Hi Edwir, You have to mention the target as lightn...Hi Edwir, You have to mention the target as lightning__Tab in the meta.xml file of your component, then you can add that to tab. Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-6531901092997915162022-06-10T10:36:09.145-07:002022-06-10T10:36:09.145-07:00Hi Rahul!
When adding LWC to a tab I get the error...Hi Rahul!<br />When adding LWC to a tab I get the error.<br /><br />Validation Errors While Saving Record(s)<br />There were custom validation error(s) encountered while saving the affected record(s). The first validation error encountered was "We couldn't validate your component c:opportunityBarChart used in Custom Tab. Review it and try again.".<br /><br />Do you know the solution?<br />Sorry for my English, thanks.Edwir Acevedo Acevedohttps://www.blogger.com/profile/07108845188066538931noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-76532634560801735462022-02-17T23:36:58.845-08:002022-02-17T23:36:58.845-08:00Hi Dear Unknown, Try change the type to 'horiz...Hi Dear Unknown, Try change the type to 'horizontalBar' on line #21 from opportunityBarChart.js file.Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-10137506346078036692022-02-16T22:22:31.121-08:002022-02-16T22:22:31.121-08:00Hello Rahul , I need this chart in horizontal mann...Hello Rahul , I need this chart in horizontal manner. How could I change this?Anonymoushttps://www.blogger.com/profile/13580668275239386885noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-2333592131617643272021-05-27T21:54:24.133-07:002021-05-27T21:54:24.133-07:00No problem, always happy to help.No problem, always happy to help.Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-59545905269453099832021-05-27T13:11:40.053-07:002021-05-27T13:11:40.053-07:00Please ignore the post. Everything working fine. ...Please ignore the post. Everything working fine. I was using wrong Chart.js (I used the chat.bundle.min.js as you suggested and able to get the chart. Thanks again for the nice article on charts. KrisKeehttps://www.blogger.com/profile/11486810659590814014noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-3573276723359439592021-05-27T09:53:46.537-07:002021-05-27T09:53:46.537-07:00Thanks I opened an issue on github site.Thanks I opened an issue on github site.KrisKeehttps://www.blogger.com/profile/11486810659590814014noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-28189484648980692021-05-27T00:52:01.952-07:002021-05-27T00:52:01.952-07:00Hello Dear Unknown, Did you add the class barChart...Hello Dear Unknown, Did you add the class <i>barChart</i> to the canvas like this<br /><br /><i><canvas class="barChart" lwc:dom="manual"></canvas></i><br /><br />If you still have any problem, please share your code on GitHub gist or raise an issue <a href="https://github.com/rahulgawale/chartjs-lwc" rel="nofollow">here</a>Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-39365042741433022442021-05-26T15:29:14.844-07:002021-05-26T15:29:14.844-07:00Thank you Rahul for this article. Really helpful. ...Thank you Rahul for this article. Really helpful. <br />I used the same but getting error on below line <br />this.template.querySelector('canvas.barChart').getContext('2d'); (from chart.js) <br />Cannot read property 'getContext' of null. All my code is same. except the data. Appreciate any helpKrisKeehttps://www.blogger.com/profile/11486810659590814014noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-47102331551746676842021-01-27T22:54:08.485-08:002021-01-27T22:54:08.485-08:00Hi Santhosh, I never tried putting text on the bar...Hi Santhosh, I never tried putting text on the bar, can you try solution from <a href="https://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js" rel="nofollow">this</a> link?Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-21448608750723254082021-01-27T08:51:28.762-08:002021-01-27T08:51:28.762-08:00Hi Rahul,
I used currency field so it was resolved...Hi Rahul,<br />I used currency field so it was resolved now & now how to display the numbers in chart Santhoshhttps://www.blogger.com/profile/11571571067286464226noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-50941422751506426922021-01-26T22:11:49.112-08:002021-01-26T22:11:49.112-08:00can you share your code? If you want to add label ...can you share your code? If you want to add label for y axis that you can specify in the options. Also the axis values are based on the data so please verify the data.Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-42047458217018100112021-01-26T09:39:20.683-08:002021-01-26T09:39:20.683-08:00Hi Rahul,
In the above Image Y axis is getting Amo...Hi Rahul,<br />In the above Image Y axis is getting Amount,& i have tried it but i am getting o.1,0.2....etc. I need in the Y axis top show Amount or another fieldSanthoshhttps://www.blogger.com/profile/11571571067286464226noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-35351322235293422802020-12-14T06:30:59.123-08:002020-12-14T06:30:59.123-08:00I try it and I will give you my feedback as soon a...I try it and I will give you my feedback as soon as possible.<br />Thank you RahulFOCOhttps://www.blogger.com/profile/12909918647406547775noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-79576820981454324592020-12-11T03:08:55.527-08:002020-12-11T03:08:55.527-08:00This comment has been removed by the author.FOCOhttps://www.blogger.com/profile/12909918647406547775noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-69746184674440834492020-12-08T04:00:12.433-08:002020-12-08T04:00:12.433-08:00Hi FOCO, I appreciate your patience. I have the wo...Hi FOCO, I appreciate your patience. I have the working example for that with <b>Chart.js v2.8.0</b>. You can try the same code with latest version too. Here is the git repo for that. <a href="https://github.com/rahulgawale/chartjs-with-custom-ticks-lwc" rel="nofollow">chartjs-with-custom-ticks-lwc</a>. Let me know if this helps you. For the code check in the chartExample.js file.Rahul Gawalehttps://www.blogger.com/profile/17790026688078884559noreply@blogger.comtag:blogger.com,1999:blog-2563180596812825704.post-18986923334195009332020-12-07T06:10:39.987-08:002020-12-07T06:10:39.987-08:00Hi Rahul,
Thank for your feedback.
I continue lo...Hi Rahul,<br /><br />Thank for your feedback. <br />I continue looking for the solution.<br />FOCOhttps://www.blogger.com/profile/12909918647406547775noreply@blogger.com