The Highcharts feature in Salesforce empowers developers to create visually appealing charts and graphs that vividly represent Salesforce data, showcasing the power of data visualization in your hands.
Highcharts and Visualforce pages or Lightning components in Salesforce provide a powerful toolkit for visually engaging charts, facilitating deeper insights and decision-making.
Advantages of using Highcharts over Salesforce’s built-in chart and dashboard features
Salesforce offers built-in chart functionality, but users may choose Highcharts for several reasons:–Â
Advanced Customization: Highcharts allows for extensive customization of chart appearance, feel, and functionality, enabling unique and engaging visualizations.
Complex Chart Types: Highcharts support a broader range of chart types, including gauge charts, 3D charts, and heatmaps, surpassing Salesforce’s native options.
Highcharts offer a high degree of flexibility for integration with Salesforce applications, including Visualforce pages, Lightning components, and external web apps, empowering developers with the adaptability to suit their specific needs.
Highcharts can efficiently visualize data from external databases, APIs, and spreadsheets, handling large datasets with ease. This versatility makes it an ideal tool for data-heavy businesses, empowering developers with efficient data visualization capabilities.
WHICH TO CHOOSE: 3D OR 2D?
Highcharts’ suitability for visualization depends on specific needs and preferences. Here are reasons for choosing 3D charts:
Enhanced Aesthetic Presentation: 3D charts offer depth and perspective, enhancing data visualization.
Complex Data Representation: They intuitively show complex data linkages, aiding understanding.
User Interaction and Engagement: 3D charts engage users with interactive data exploration.
Depth Perception: They provide clear data point distinction, which is helpful for large datasets.
Emphasis on Trends: 3D charts highlight data trends for better decision-making.
Steps to follow:
Step 1: Integrate Highcharts with Salesforce by uploading the required static file. Then, access the latest versions through the provided link.
   Reference to Highcharts static resources
Step – 2 – Define the HTML as follows:
         <div data-id=“donut chart” style=“min-width: 250px; height: 300px; margin: 0 auto”></div>
Further use of this data-id will occur in JS.
Step – 3 – To load the highchart, use the JS’s Uploaded Static Resource.
import { loadScript } from ‘lightning/platformResourceLoader’;
import charts from ‘@salesforce/resourceUrl/Highcharts3d’;Â
‘connectedback()’ is a function that establishes a connection between a Highchart and other application components or data sources, enabling real-time updates and interactive features.
loadScript(this, HIGHCHARTS)
         .then(() => loadScript(this, charts))
            .then(() => {
                this.initializeChart()
            })
            .catch((error) => {
                console.error(‘Error loading highcharts:’, error);
            });
Initialization is crucial for Highcharts to be set up correctly and ready for website rendering, allowing adjustments to appearance, behaviour, and data sources.
Step – 5 –Â Confirm that the JS is receiving data from Apex.
Step – 6 – Verify that the JS configuration for Highcharts is correct (the Donut Chart is used as an example here).
initializeDonutChart() {
        const ctx = this.template.querySelector(‘div[data-id=”donutchart”]’);
        this.donutChart = Highcharts.chart(ctx, {
            chart: {
                type: ‘pie’,
                options3d: {
                    enabled: true,
                    alpha: 45
               }
            },
            title: {
                text: ‘Opportunity Distribution (3D Donut Chart)’
            },
            tooltip: {
                pointFormat: ‘{series.name}: <b>{point.y}</b>’
            },
            plotOptions: {
                pie: {
                    innerSize: 50,
                    depth: 45
                }
            },
            series: [{
                type: ‘pie’,
                name: ‘Opportunity’,
                data: this.chartData
            }]
        });
      Â
    }
This is where this.chartData we obtain from the ApexÂ
this.chartData = data.map(record => ({ name: record.Name, y: record.Amount }));
We map the data in this style since we used the opportunity name and corresponding amount to be shown on the chart.
Step – 7 – Final Result
How is communication between HTML and JS done?
Highcharts 3D integrates into Salesforce applications through HTML and JavaScript communication, ensuring dynamic data visualization with reflected changes in the HTML DOM.
Data Transfer from Apex to JavaScriptÂ
Salesforce Apex plays a crucial role in the data transfer process. It allows data from external sources or databases to be accessed in JavaScript code for HighCharts 3D. This enables additional mappings using adapters like wire, facilitating a smooth data transfer process.
Data Manipulation with JavaScript
Upon transferring data from Apex to JavaScript, it can be modified for HighCharts 3D visualization. This involves performing additional computations or applying business logic, potentially involving filtering, aggregating, or modification. This step is crucial for preparing the data for visualization.
Managing Unique Circumstances in HIGHCHARTS
Generating Dynamic Colors :Â
const colors = this.generateDynamicColors(this.chartData.length);
plotOptions: {
            pie: {
                innerSize: 50,
                depth: 45,
                colors: colors // Assign dynamic colors here
            }
        },
Â
 generateDynamicColors(count) {
        const dynamicColors = [];
        for (let i = 0; i < count; i++) {
            const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
            dynamicColors.push(color);
        }
        return dynamicColors;
    }
Conclusion:
Highcharts and Salesforce integrate for advanced data visualization, enhancing analytics, chart styles, and customization. Highcharts 3D improves visual experiences, while JavaScript and HTML facilitate user interactions. Salesforce Apex enables seamless integration, boosting data analysis and CRM strategy outcomes.
For further references, please refer to the link provided below:
HIGHCHARTS
Authors:Sai Bharath Thatavarthi & Neha Mewada
