Report Chart | Lightning Component | Chart JS

2

In this blog post, I am going to share a lighting component that will display a chart based on the selected report and chart type. In this component, I have used the Chart.JS open-source javascript library to draw a chart in the lightning component. The user can select the report and chart type to draw/display the chart and the selection of report name and chart type will be remembered for the user.

Chart JS is a javascript library that allows us to design and draw the different kinds of charts using the HTML 5 canvas element. We can use this library to draw a simple, clean and animated chart. Below are some advantages of using this library for drawing charts.

  • It is an open-source.
  • We can use 8 chart types to display the chart.
  • HTML5 canvas (great rendring performance across all the modern browser)
  • It is responsive.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
view raw ChartJS.html hosted with ❤ by GitHub

I have created a package that you can install in your salesforce instance.

RPTChart: Download/Install  OR get full code here.

3

6

https://sfdclesson.com/report-chart-lightning-component-chart-js-full-code/

References:

 

Thanks

Arun Kumar

Arun Kumar

Arun Kumar is a Salesforce Certified Platform Developer I with over 7+ years of experience working on the Salesforce platform. He specializes in developing custom applications, integrations, and reports to help customers streamline their business processes. Arun is passionate about helping businesses leverage the power of Salesforce to achieve their goals.

Leave a Reply