Why HighCharts?
You might think, “Do we need another way to show data? We’ve got plenty already.”Â
But hold on a second.Â
HighCharts is more than just a pretty tool in a sea of options. It’s a robust system that works well with Salesforce, making it ideal for developers who want to create eye-catching interactive data displays without much hassle. Its ease of use will make you feel confident and at ease.
The HighCharts Family
HighCharts isn’t a one-trick pony. It’s a comprehensive suite of products that cover all your charting needs, making you feel secure and well-equipped:
- HighCharts Core: Your go-to for all the classics – area, bar, column, you name it.
- HighCharts Map: Perfect for when you need to tie your data to geography.
- HighCharts Stock: Ideal for those timeline charts that make you feel like a Wall Street pro.
- HighCharts Gantt: Sometimes, you need to visualize your project timelines without losing your mind.
HighCharts Dashboards: When you want to whip up a responsive dashboard faster than you can say “data-driven decisions.”
Essential Features for Salesforce Developers
- HighCharts integrates effortlessly with the Salesforce stack, providing a robust solution for data visualization needs.
- Use JavaScript and CSS styling to adjust charts to match your brand and design needs.
- Charts change size to look good on computers and phones so everyone can see them.Â
- You can touch and move things on screens you can feel, which helps people understand the data better.
Implementation Guide
Let’s explore the process of implementing HighCharts in your Salesforce environment. We’ll walk through creating a basic line chart to demonstrate the essential steps.
Step-by-Step Implementation:
- Upload the High Charts library to your Salesforce static resources.
- As you can define your tile on how to display the chart with HTML, to load the chart, we need to import the High charts static resource, which will be used in our JS.
     import {loadScript} from ‘lightning/platformResourceLoader’;
     import highcharts from ‘@salesforce/resourceUrl/highCharts’;
- We need to dynamically load the High charts library to ensure the library is available whenever needed, especially in environments like Lightning Web Components(LWC), where scripts cannot be directly included in HTML. Therefore, we use the Loadscript function to help manage dependencies.
      loadScript(this, highcharts)
            .then(() => {
        this.loadData();// We call initializeChart in this method
                console.log(‘Highcharts library loaded successfully’);})
            .catch(error => {
                console.error(‘Error loading Highcharts’, error);
            });
- Check the data is being passed from Apex to JS as you wanted to upon transferring data from Apex to JS by performing the required logic and additional computations. Then, we need to initialize the chart because it encapsulates the logic for setting up and rendering the highcharts with desired features and styles.
      initializeChart() {const categories = this.picklistValues;
            let seriesData = {};
     constchartContainer=this.template.querySelector(‘.missedSLA-container’);
     Highcharts.chart(chartContainer, {chart: {type: ‘column’,backgroundColor:   ‘#f5fffa’,},title: {text: ”},
            xAxis: {categories: this.categories,labels: {rotation: 0,formatter: function () {const parts = this.value.split(‘ ‘);
                        return parts[0] + ‘ ‘ + parts[1];
                    } }, },
            yAxis: [{min: 0,title: {text: ‘Count’},
            stackLabels: {enabled: true} },{min: 0,max:100,opposite:  true,title: {text: ‘Cumulative Percentage’  }}],
            tooltip: {headerFormat: ‘Total: {point.stackTotal}’,pointFormat: ‘{series.name}: {point.y}’,},
            plotOptions: { column: {stacking: ‘normal’,dataLabels: {enabled: false,} } },
            series: columnSeries.concat([{
                name: ‘Cumulative Percentage’,
                data: cumulativePercentageData,
                yAxis: 1,
                type: ‘spline’,
                color: ‘red’,
                tooltip: {
                    valueSuffix: ‘%’ }}]),
            legend: {enabled: false, // This will hide the legends},
         credits: {enabled: false }}});}
This initialization will result in a professional, interactive line chart displaying monthly sales data.
Conclusion:
Highcharts gives you a strong and flexible way to enhance how you show data in Salesforce. It fits in easily. A versatile solution for enhanced data visualization and seamless integration capabilities can elevate your data presentation strategies, enabling extensive customization options and making it more user-friendly and Salesforce-friendly. Thus, it could be valuable to your Salesforce developer’s toolkit.
Authors: Sravan Kumar Korada & Venkata Sai Tejashwini Nanduri
