0

Edit: I fumbled around with older versions of rmarkdownand it turns out this problem starts occurring from version 2.11 onwards. I will open an issue there

I used to be able to render graphs in rmarkdown with the billboarder package (based on billboard.js), however as of roughly 1.5 week ago it is not working anymore. I cannot tell whether this is an issue with rmarkdown, billboarder, or my browser itself (though, I tested multiple browsers, all with the same result).

When I try to open the rmarkdown I get a white area where a graph should and the html looks like this:

<div class="chart-shim">
    <div class="knitr-options" data-fig-width="576" data-fig-height="460">

    </div>
    <div class="billboarder html-widget html-widget-static-bound" style="width:100%;height:320px; position: relative;">
        <a id="htmlwidget-e825b9291572f3e0c3c0-export" style="position:absolute; top:0; right:0; display:none; z-index:50;"></a>
        <div id="htmlwidget-e825b9291572f3e0c3c0" class="billboarder html-widget html-widget-static-bound bb" style="width:100%;height:320px;" width="100%" height="320px"></div>
    </div>
    <script type="application/json" data-for="htmlwidget-e825b9291572f3e0c3c0">{"x":{"bb_opts":{"interaction":{"inputType":{"touch":false}},"line":{"classes":["billboarder-line-Error%"]},"data":{"x":"YearWeek","json":{"YearWeek":["2019-52","2020-01","2020-02","2020-03","2020-04","2020-05","2020-06","2020-07","2020-08","2020-09","2020-10","2020-11","2020-12","2020-13","2020-14","2020-15","2020-16","2020-17","2020-18","2020-19","2020-20","2020-21","2020-22","2020-23","2020-24","2020-25","2020-26","2020-27","2020-28","2020-29","2020-30","2020-31","2020-32","2020-33","2020-34","2020-35","2020-36","2020-37","2020-38","2020-39","2020-40","2020-41","2020-42","2020-43","2020-44","2020-45","2020-46","2020-47","2020-48","2020-49","2020-50","2020-51","2020-52","2020-53","2021-01","2021-02","2021-03","2021-04","2021-05","2021-06","2021-07","2021-08","2021-09","2021-10","2021-11","2021-12","2021-13","2021-14","2021-15","2021-16","2021-17","2021-18","2021-19","2021-20","2021-21","2021-22","2021-23","2021-24","2021-25","2021-26","2021-27","2021-28","2021-29","2021-30","2021-31","2021-32","2021-33","2021-34","2021-35","2021-36","2021-37","2021-38","2021-39","2021-40","2021-41","2021-42","2021-43","2021-44","2021-45","2021-46","2021-47","2021-48","2021-49","2021-50","2021-51","2021-52","2022-01","2022-02","2022-03","2022-04","2022-05","2022-06","2022-07","2022-08","2022-09","2022-10","2022-11","2022-12","2022-13","2022-14","2022-15","2022-16","2022-17","2022-18","2022-19","2022-20","2022-21","2022-22","2022-23"],"Error%":[3.3613,3.4148,4.089,0.826,0.4581,1.0571,0.6996,1.0451,0.9992,1.4486,0.9897,1.365,1.3357,0.7273,1.1388,0.8837,3.7838,2.3776,1.259,0.6407,3.1256,1.3514,3.1488,1.4749,1.5338,2.3783,2.4326,1.0546,1.0985,1.6196,1.8207,0.7635,0.5374,1.2255,1.9175,1.4244,1.0198,1.2805,1.1832,1.8102,0.9881,0.9003,0.9059,1.5757,2.7138,1.1493,1.1139,1.1277,1.4599,1.7331,0.7948,1.4107,0.6787,0.7512,0.7427,0.9418,1.0053,1.3338,1.0965,0.7542,0.7808,0.7964,0.9857,0.5725,0.5285,1.1444,0.5966,0.8855,0.9025,1.0481,0.8274,1.0242,1.3205,1.1737,1.2223,1.0267,0.7062,1.2299,1.5645,1.5242,1.3416,1.8095,1.886,2.7026,2.5945,1.8185,1.6715,2.1887,2.0657,2.8086,6.1884,5.5121,6.1985,5.8881,4.6055,4.5209,4.5838,5.5477,5.5712,3.5254,2.6758,3.1312,2.656,2.3547,2.3699,2.6502,1.6241,1.2437,1.9572,2.7802,2.2541,1.8708,1.7705,1.8023,1.2543,2.2608,3.3989,1.737,1.8588,2.3471,1.3021,1.3411,1.8547,1.5632,2.8101,2.9457,1.7314,1.0614,2.2938]},"types":{"Error%":"spline"}},"point":{"show":true},"axis":{"x":{"type":"category","tick":{"rotate":90,"width":100}}},"grid":{"y":{"show":true}}},"data":null},"evals":[],"jsHooks":[]}</script>
</div>

However, when I check a similar chart that I render in Shiny the div looks like this:

<div style="color: black">
                              <div class="billboarder html-widget html-widget-output" style="width:100%; height:200px;  position: relative;">
                                <a id="WeeklyOutput-export" style="position:absolute; top:0; right:0; display:none; z-index:50;"></a>
                                <div id="WeeklyOutput" class="billboarder html-widget html-widget-output shiny-bound-output bb" style="width: 100%; height: 200px; visibility: inherit; position: relative;" width="100%" height="200" aria-live="polite"><svg width="1037" height="200" style="overflow: hidden; display: block;"><defs><clipPath id="bb-1655118455250-clip"><rect width="965" height="156"></rect></clipPath><clipPath id="bb-1655118455250-clip-xaxis"><rect x="-49" y="-15" width="1025" height="60"></rect></clipPath><clipPath id="bb-1655118455250-clip-yaxis"><rect x="-69" y="-4" width="90" height="170"></rect></clipPath><clipPath id="bb-1655118455250-clip-grid"><rect width="965" height="156"></rect></clipPath></defs><g class="bb-main" transform="translate(70.5, 4.5)"><g clip-path="url(http://127.0.0.1:5296/#bb-1655118455250-clip-grid)" class="bb-grid" style="visibility: visible;"><g class="bb-ygrids"><line class="bb-ygrid" x1="0" x2="965" y1="144" y2="144"></line><line class="bb-ygrid" x1="0" x2="965" y1="125" y2="125"></line><line class="bb-ygrid" x1="0" x2="965" y1="107" y2="107"></line><line class="bb-ygrid" x1="0" x2="965" y1="88" y2="88"></line><line class="bb-ygrid" x1="0" x2="965" y1="70" y2="70"></line><line class="bb-ygrid" x1="0" x2="965" y1="51" y2="51"></line><line class="bb-ygrid" x1="0" x2="965" y1="33" y2="33"></line><line class="bb-ygrid" x1="0" x2="965" y1="14" y2="14"></line></g><g class="bb-xgrid-focus"><line class="bb-xgrid-focus" x1="103" x2="103" y2="156" style="visibility: hidden;" y1="0"></line></g></g><g class="bb-chart" clip-path="url(http://127.0.0.1:5296/#bb-1655118455250-clip)"><g class="bb-event-rects bb-event-rects-single" style="fill-opacity: 0;"><rect x="0" y="0" width="965" height="156" class="bb-event-rect"></rect></g><g class="bb-chart-lines"><g class="bb-chart-line bb-target bb-target-2021" style="opacity: 1; pointer-events: none;"><g class="bb-shapes bb-shapes-2021 bb-lines bb-lines-2021"><path class="bb-shape bb-shape bb-line bb-line-2021 billboarder-line-2021" d="M10,123.24665476190476L29,120.6042738095238L47,117.60686904761906L66,107.69092857142857L84,103.96982142857144L103,102.1614880952381L121,102.18990476190476L140,103.16160714285715L158,107.44514285714284L177,105.42165476190476L195,97.48860714285715L214,104.85848809523809L233,100.09555952380951L251,96.01463095238094L270,89.48507142857143L288,84.57673809523811L307,79.32777380952382L325,67.06690476190477L344,58.612392857142865L362,57.47978571428572L381,69.40925L400,75.74321428571427L418,75.6302857142857L437,69.70780952380952L455,70.91607142857143L474,58.20533333333333L492,77.53789285714286L511,72.68196428571427L529,83.81502380952381L548,75.48414285714284L566,72.28634523809524L585,56.51214285714285L604,56.85535714285714L622,42.713821428571414L641,47.75722619047618L659,49.82426190476191L678,56.517678571428576L696,55.49467857142857L715,47.80446428571428L733,52.03596428571428L752,53.587809523809526L771,57.22292857142857L789,66.94770238095238L808,65.39179761904762L826,52.55595238095238L845,44.24869047619048L863,103.11104761904764L882,108.25778571428572L900,104.29273809523811L919,90.21430952380953L937,94.46684523809525L956,72.97757142857142" style="stroke: rgb(31, 119, 180); opacity: 1;"></path></g></g><g class="bb-chart-line bb-target bb-target-2022" style="opacity: 1; pointer-events: none;"><g class="bb-shapes bb-shapes-2022 bb-lines bb-lines-2022"><path class="bb-shape bb-shape bb-line bb-line-2022 billboarder-line-2022" d="M10,64.15696428571428L29,63.29892857142857L47,68.67558333333334L66,67.03295238095238L84,65.19989285714286L103,57.035083333333326L121,45.70827380952381L140,39.59020238095238L158,46.22530952380953L177,44.41180952380953L195,48.89204761904762L214,46.03045238095237L233,48.61710714285715L251,35.57533333333335L270,45.35546428571428L288,40.370000000000005L307,31.823595238095226L325,37.94351190476191L344,41.916309523809524" style="stroke: rgb(255, 127, 14); opacity: 1;"></path></g></g></g></g><g class="bb-axis bb-axis-x" clip-path="url(http://127.0.0.1:5296/#bb-1655118455250-clip-xaxis)" transform="translate(0, 156)" style="visibility: visible; opacity: 1;"><text class="bb-axis-x-label" x="0" dx="0.5em" dy="3em" style="text-anchor: start;">Week</text><g class="tick" transform="translate(10,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">5</tspan></text></g><g class="tick" transform="translate(29,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">6</tspan></text></g><g class="tick" transform="translate(47,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">7</tspan></text></g><g class="tick" transform="translate(66,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">8</tspan></text></g><g class="tick" transform="translate(84,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">9</tspan></text></g><g class="tick" transform="translate(103,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">10</tspan></text></g><g class="tick" transform="translate(121,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">11</tspan></text></g><g class="tick" transform="translate(140,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">12</tspan></text></g><g class="tick" transform="translate(158,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">13</tspan></text></g><g class="tick" transform="translate(177,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">14</tspan></text></g><g class="tick" transform="translate(195,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">15</tspan></text></g><g class="tick" transform="translate(214,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">16</tspan></text></g><g class="tick" transform="translate(233,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">17</tspan></text></g><g class="tick" transform="translate(251,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">18</tspan></text></g><g class="tick" transform="translate(270,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">19</tspan></text></g><g class="tick" transform="translate(288,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">20</tspan></text></g><g class="tick" transform="translate(307,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">21</tspan></text></g><g class="tick" transform="translate(325,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">22</tspan></text></g><g class="tick" transform="translate(344,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">23</tspan></text></g><g class="tick" transform="translate(362,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">24</tspan></text></g><g class="tick" transform="translate(381,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">25</tspan></text></g><g class="tick" transform="translate(400,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">26</tspan></text></g><g class="tick" transform="translate(418,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">27</tspan></text></g><g class="tick" transform="translate(437,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">28</tspan></text></g><g class="tick" transform="translate(455,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">29</tspan></text></g><g class="tick" transform="translate(474,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">30</tspan></text></g><g class="tick" transform="translate(492,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">31</tspan></text></g><g class="tick" transform="translate(511,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">32</tspan></text></g><g class="tick" transform="translate(529,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">33</tspan></text></g><g class="tick" transform="translate(548,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">34</tspan></text></g><g class="tick" transform="translate(566,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">35</tspan></text></g><g class="tick" transform="translate(585,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">36</tspan></text></g><g class="tick" transform="translate(604,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">37</tspan></text></g><g class="tick" transform="translate(622,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">38</tspan></text></g><g class="tick" transform="translate(641,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">39</tspan></text></g><g class="tick" transform="translate(659,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">40</tspan></text></g><g class="tick" transform="translate(678,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">41</tspan></text></g><g class="tick" transform="translate(696,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">42</tspan></text></g><g class="tick" transform="translate(715,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">43</tspan></text></g><g class="tick" transform="translate(733,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">44</tspan></text></g><g class="tick" transform="translate(752,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">45</tspan></text></g><g class="tick" transform="translate(771,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">46</tspan></text></g><g class="tick" transform="translate(789,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">47</tspan></text></g><g class="tick" transform="translate(808,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">48</tspan></text></g><g class="tick" transform="translate(826,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">49</tspan></text></g><g class="tick" transform="translate(845,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">50</tspan></text></g><g class="tick" transform="translate(863,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">51</tspan></text></g><g class="tick" transform="translate(882,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">52</tspan></text></g><g class="tick" transform="translate(900,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: block;"><tspan x="0" dx="0" dy=".71em">53</tspan></text></g><g class="tick" transform="translate(919,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">54</tspan></text></g><g class="tick" transform="translate(937,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">55</tspan></text></g><g class="tick" transform="translate(956,0)" style="opacity: 1;"><line x2="0" x1="0" y2="6"></line><text x="0" y="9" style="text-anchor: middle; display: none;"><tspan x="0" dx="0" dy=".71em">56</tspan></text></g><path class="domain" d="M0,6V0H965V6"></path></g><g class="bb-axis bb-axis-y" clip-path="url(http://127.0.0.1:5296/#bb-1655118455250-clip-yaxis)" transform="translate(0, 0)" style="visibility: visible; opacity: 1;"><text class="bb-axis-y-label" transform="rotate(-90)" style="text-anchor: middle;" x="-78" dx="0" dy="-43.36805725097656">Units (x1.000)</text><g class="tick" transform="translate(0,144)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,125)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">500</tspan></text></g><g class="tick" transform="translate(0,107)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">1000</tspan></text></g><g class="tick" transform="translate(0,88)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">1500</tspan></text></g><g class="tick" transform="translate(0,70)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">2000</tspan></text></g><g class="tick" transform="translate(0,51)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">2500</tspan></text></g><g class="tick" transform="translate(0,33)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">3000</tspan></text></g><g class="tick" transform="translate(0,14)" style="opacity: 1;"><line x2="-6" y1="0" y2="0"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dx="0" dy="3">3500</tspan></text></g><path class="domain" d="M-6,1H0V156H-6"></path></g></g><g class="bb-legend" transform="translate(918.1964645385742, 5.5)"><g class="bb-legend-background"><rect height="29.333335876464844" width="117.30353546142578"></rect></g><g class="bb-legend-item bb-legend-item-2021" style="visibility: visible; cursor: pointer; opacity: 1;"><text x="24" y="19" style="pointer-events: none;">2021</text><rect class="bb-legend-item-event" x="10" y="5" width="52.84722328186035" height="20.666667938232422" style="fill-opacity: 0;"></rect><line class="bb-legend-item-tile" x1="8" y1="14" x2="18" y2="14" stroke-width="10" style="stroke: rgb(31, 119, 180); pointer-events: none;"></line></g><g class="bb-legend-item bb-legend-item-2022" style="visibility: visible; cursor: pointer; opacity: 1;"><text x="77.65176773071289" y="19" style="pointer-events: none;">2022</text><rect class="bb-legend-item-event" x="63.65176773071289" y="5" width="53.65176773071289" height="20.666667938232422" style="fill-opacity: 0;"></rect><line class="bb-legend-item-tile" x1="61.65176773071289" y1="14" x2="71.65176773071289" y2="14" stroke-width="10" style="stroke: rgb(255, 127, 14); pointer-events: none;"></line></g></g></svg><div class="bb-tooltip-container" style="position: absolute; pointer-events: none; top: 5.18055px; left: 193.5px; display: none; visibility: hidden;"><table class="bb-tooltip"><tbody><tr><th colspan="2">10</th></tr><tr class="bb-tooltip-name-2021"><td class="name"><span style="background-color:#1f77b4"></span>2021</td><td class="value">1108.85</td></tr><tr class="bb-tooltip-name-2022"><td class="name"><span style="background-color:#ff7f0e"></span>2022</td><td class="value">2331.63</td></tr></tbody></table></div></div>
                              </div>
                            </div>

The whole layout is completely different. I have never seen a div with class "chart-shim" before, nor a script element in the billboard div.

The packages that I use are:

billboarder 0.3.1

rmarkdown 2.14

Both the latest released versions.

TL;DR: "Something" updated less than 2 weeks ago which made it impossible for me to use billboarder in my rmarkdown documents. Looking for a solution or at least a workaround.

koolmees
  • 2,725
  • 9
  • 23
  • The HTML isn't going to give you the information needed to address whatever the problem is. (Perhaps it could if you included all of it.) It is probably best if you make your question reproducible. What do you have coded in your RMD? – Kat Jun 13 '22 at 15:48
  • It happens when I try to render any graph using `billboarder` on an html_document (haven't tested other document types). The content of the graph or type of graph is irrelevant but if you really want I can type out an example with mtcars or something but it seems redundant to me – koolmees Jun 13 '22 at 15:53
  • To specify; With the exact same code the graphs were plotted as expected in rmarkdown 2.10 and versions prior – koolmees Jun 13 '22 at 15:56
  • I have no problem rendering `billboarder` through RMD, that's why I asked what was coded in your RMD. Have you tried creating a new RMD and only having a single `billboarder` plot as the output? (No other code, styles, output options; BTW, I have the same package versions) – Kat Jun 13 '22 at 16:03
  • A reproducible example in a Rmd seems necessary: It can't be reproduce currently using a demo example See https://github.com/rstudio/rmarkdown/issues/2378 – cderv Jun 13 '22 at 16:43
  • Thanks for the responses @cderv. I will look into a reproducable example tomorrow – koolmees Jun 13 '22 at 19:12

0 Answers0