+ Start a Discussion
Artem Kalus 7Artem Kalus 7 

Highcharts problems in LWC

If accessibility.js loaded (LWC js v1), menu is not opening in LWC.

In LWC v2 accessibility.js is not loaded, and the menu opens, however, it has redundant spacing, view table and full screen features are not working.


Both versions are missing highlights below the graph in LWC.


LWC html:
<template>
    <div id="container" lwc:dom="manual"></div>
</template>

LWC v1 js:
import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
//import jQuery from "@salesforce/resourceUrl/dftlytime__jquery2_2_4";
//import jQuery from "@salesforce/resourceUrl/APXTConga4__jQuery";
import jQuery from "@salesforce/resourceUrl/jQuery_3_5_1_min";


import highchartsResource from "@salesforce/resourceUrl/Highcharts_8_1_0";


export default class HighchartsDynamic extends LightningElement {



    renderedCallback() {

        loadScript(this, highchartsResource + "/highcharts.js")
        .then(() => {
            console.log("SUCCESS: highcharts.js");

            loadScript(this, highchartsResource + "/modules/exporting.js")
            .then(() => {
                console.log("SUCCESS: exporting.js");

                loadScript(this, highchartsResource + "/modules/export-data.js")
                .then(() => {
                    console.log("SUCCESS: export-data.js");

                    loadScript(this, highchartsResource + "/modules/accessibility.js")
                    .then(() => {
                        console.log("SUCCESS: accessibility.js");
                        this.runHighcharts();
                    })
                    .catch(error => console.log("ERROR: accessibility.js"));
                })
                .catch(error => console.log("ERROR: export-data.js"));
                
            })
            .catch(error => console.log("ERROR: exporting.js"));
        })
        .catch(error => console.log("ERROR: highcharts.js"));

    }


    runHighcharts() {

        const containerElement = this.template.querySelector('div');


        Highcharts.chart(containerElement, 


            // PIE CHART EXAMPLE
            {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }]
            }

        );
      }
}


LWC v2 js:
import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
//import jQuery from "@salesforce/resourceUrl/dftlytime__jquery2_2_4";
//import jQuery from "@salesforce/resourceUrl/APXTConga4__jQuery";
import jQuery from "@salesforce/resourceUrl/jQuery_3_5_1_min";


import highchartsResource from "@salesforce/resourceUrl/Highcharts_8_1_0";


export default class HighchartsDynamic extends LightningElement {



    renderedCallback() {

        loadScript(this, highchartsResource + "/highcharts.js")
        .then(() => {
            console.log("SUCCESS: highcharts.js");

            loadScript(this, highchartsResource + "/modules/exporting.js")
            .then(() => {
                console.log("SUCCESS: exporting.js");

                loadScript(this, highchartsResource + "/modules/export-data.js")
                .then(() => {
                    console.log("SUCCESS: export-data.js");
                    this.runHighcharts();
                    // loadScript(this, highchartsResource + "/modules/accessibility.js")
                    // .then(() => {
                    //     console.log("SUCCESS: accessibility.js");
                    //     this.runHighcharts();
                    // })
                    // .catch(error => console.log("ERROR: accessibility.js"));
                })
                .catch(error => console.log("ERROR: export-data.js"));
                
            })
            .catch(error => console.log("ERROR: exporting.js"));
        })
        .catch(error => console.log("ERROR: highcharts.js"));

    }


    runHighcharts() {

        const containerElement = this.template.querySelector('div');


        Highcharts.chart(containerElement, 


            // PIE CHART EXAMPLE
            {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }]
            }

        );
      }
}

LWC Screenshot:
User-added image




Perfectly Working VFP:
<apex:page >
    
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/highcharts.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/modules/exporting.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/modules/export-data.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.Highcharts_8_1_0, '/modules/accessibility.js')}"/>
    
    
    
    <apex:form >
        
        
        <div id="wrapper">
            <div id="container"></div>
        </div>
        
        
        <script>
        window.onload = function () {
            init();
        }  
        
        function init () {
            var divId = document.getElementById('wrapper');
            console.log(divId);
            Highcharts.chart('container',{
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Invoice Statuses Report'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        },showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Invoice Chart',
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }]
            });
        }
        </script>
    </apex:form>



    <style>
    .highcharts-figure, .highcharts-data-table table {
        min-width: 320px; 
        max-width: 800px;
        margin: 1em auto;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }
    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }
    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }
    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
        padding: 0.5em;
    }
    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }
    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }


    input[type="number"] {
        min-width: 50px;
    }
    </style>
</apex:page>

VFP Screenshot:
User-added image