-
Can we create bar chart in lightning component?
Is it possible to display bar chart in lightning component? If it is possible then any help will be appreciable.
-
2 Replies
-
Yes sure
There is an app (Chart.js) on AppExchange. Install it in your environment and you are ready to create charts in lightning component. Link for App is provided:-
(https://appexchange.salesforce.com/listingDetail?listingId=a0N30000000q5ADEAY)
- [adinserter block='9']
-
Hello,
Yes, you can create Bar chart in lightning component using HighStock.js and HighChart.js. These are help you to create chart in lightning component.
I have a sample to create chart in lightning component:-
ChartCmp:-
<aura:component >
<ltng:require scripts=”/resource/highstock_4_2_3/js/highstock-all.js, /resource/highstock_4_2_3/js/highcharts-3d.js, /resource/highmaps_4_2_3/js/modules/map.js”
afterScriptsLoaded=”{!c.afterScriptsLoaded}”/><div aura:id=”chart” class=”chart_sec” style=”width:20%; height:200px;”/>
</aura:component>ChartCmp.js:-
({
afterScriptsLoaded : function(component, event, helper) {
var chart = new Highcharts.Chart({
chart: {
renderTo: component.find(“chart”).getElement(),
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: ‘pie’,},
title: {
text: ‘Browser market January, 2015 to May, 2015’
},
tooltip: {
pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘<b>{point.name}</b>: {point.percentage:.1f} %’,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black’
}
}
}
},
series: [{
type: ‘pie’,
name: ‘Browser share’,
data: [
[‘Firefox’, 45.0],
[‘Chrome’, 26.8],
{
name: ‘IE’,
y: 9.8,
sliced: true,
selected: true
},
[‘Safari’,8.0],
[‘Opera’, 9.2],
[‘Others’, 10.7]
]
}]
});
},})
ChartApp:-
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
<c:ChartCmp />
</aura:application>
Log In to reply.
