Highchart in conflict with html template

shiny
,
1

Dear all!

I am contacting you directly as you are the author of the great html template article. I am facing some sort of conflicting issue I have been neither able to solve, nor to find appropriate dedicated post from the community.

Dear all,

please do not hesitate to share any remediation plan, I'm just naming Winston as I believe the issue is not yet popular (and maybe advanced?) but of great interest to anyone willing to 'reach the next level' in terms of Shiny design.

My problem

  • I want to design a R Shiny "html template"-based application
  • I am using a bootstrap 4 dashboard template as foundation for the user interface SB Admin 2
  • This theme requires several links and script tags to properly work:

the head of index.html is the following:

<head>
    
    {{ headContent() }}
    <!-- required R Shiny HTML template -->

    <script src="shinyjs/inject.js"></script>
    <!-- required to use shinyjs -->
    
    <script src="shared/jquery.min.js"></script>
    <script>$.noConflict(true);</script>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>title</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

index.html also contains in the end:

<script src="../vendor/jquery/jquery.min.js"></script> 

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

The issue

I guess there is a conflict issue while trying to use highcharter due to jquery, especially the following line:
<script src="../vendor/jquery/jquery.min.js"></script>

A a consequence, highcharts are not displayed in the application.

Any idea on how to fix this issue?

What I've tried so far

  1. keep <script src="../vendor/jquery/jquery.min.js"></script> => highchart charts do not appear in the application
  2. remove <script src="../vendor/jquery/jquery.min.js"></script> => other 'interactivities' are disabled, so not a good option either.
  3. keep <script src="../vendor/jquery/jquery.min.js"></script> and add {{ suppressDependencies("jquery") }} in my index.html header => same observation as 1.
  4. suppress jquery dependency and source latest jquery.js:

in index.html head
{{ suppressDependencies("jquery") }}
in the end of index.html
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> => same observation as 1

Thank you all very much in advance for your help

Regards

2

Merged from a duplicate post.

Hi all,
I'm sharing a question I asked on stackoverflow.
I want to use highcharter in a Shiny app built using html template, whose UI part leverages SB Admin 2.

While things work well with super basic html files, chart are not displayed once using the bootstrap theme.

Any idea on how to crack this issue?
Thank you very much in advance for your view!

2 Likes