Ngx-charts: Documentation examples not showing up on Gitbook

Created on 4 May 2018 · 2Comments · Source: swimlane/ngx-charts

I'm submitting a ...

[x] bug report - search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior
Looking for code examples I arrived at the online docs, e.g. https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/vertical-bar-chart
When I compare these example pages with the corresponding pages on Github, e.g.
https://github.com/swimlane/ngx-charts/blob/master/docs/charts/bar-vertical.md
... i notice that none of the Stackblitz s are showing up. (Being able to see these examples would have saved me a lot of time.)</p> <p><strong>Expected behavior</strong><br /> See actual examples in the documentation, as promised on the <a rel="nofollow noopener" target="_blank" href="https://swimlane.gitbook.io/ngx-charts">Introduction</a> page.</p> <p><strong>Reproduction of the problem</strong><br /> Navigate to any sub-page of <a rel="nofollow noopener" target="_blank" href="https://swimlane.gitbook.io/ngx-charts/examples/">https://swimlane.gitbook.io/ngx-charts/examples/</a></p> <p><strong>What is the motivation / use case for changing the behavior?</strong><br /> assist users in adopting ngx-charts</p> <p><strong>Please tell us about your environment:</strong></p> <ul> <li><p><strong>ngx-charts version:</strong> not sure</p></li> <li><p><strong>Angular version:</strong> </p></li> <li><p><strong>Browser:</strong> Chrome 66.0.3359.139</p></li> <li><p><strong>Language:</strong> </p></li> </ul> </div> <div> <div class="float-right"> <a class="text-muted" href="https://www.github.com/swimlane/ngx-charts/issues/826" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13302305?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>Balagii</strong> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">10</span> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12 mb-4 best-comment"> <div> <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2> </div> <div class="card card-custom border-lg-success mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Even I am also not able to see examples and source code, Please add plnkr demo links to view the charts, and also need more clear documentation for spark-line charts. </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7511757?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>dilipui</strong> <span class="text-muted ml-1">on 5 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 2 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Even I am also not able to see examples and source code, Please add plnkr demo links to view the charts, and also need more clear documentation for spark-line charts. </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/7511757?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="dilipui picture"> <strong>dilipui</strong> <span class="text-muted ml-1">on 5 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Will be fixed soon via #838 </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/509946?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Hypercubed picture"> <strong>Hypercubed</strong> <span class="text-muted ml-1">on 16 May 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(320427501, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(320427501, 1);" onclick="rate(320427501, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(320427501, 2);" onclick="rate(320427501, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(320427501, 3);" onclick="rate(320427501, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(320427501, 4);" onclick="rate(320427501, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(320427501, 5);" onclick="rate(320427501, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/ngx-charts/237007815/line-chart-data-point-is-not-displayed-when-value-is-0">Line chart data point is not displayed when value is 0</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/13427036?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ianfdk picture"> <strong class="pr-1" dir="ltr">ianfdk</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ngx-charts/216779050/support-for-angular-4">Support for Angular 4</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/13983663?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jvbianchi picture"> <strong class="pr-1" dir="ltr">jvbianchi</strong>  ·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ngx-charts/563758634/logarithmic-scale-for-time-series-line-chart">Logarithmic scale for time series line chart</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/6669171?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="merinshaji picture"> <strong class="pr-1" dir="ltr">merinshaji</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ngx-charts/274781273/add-color-to-data">Add Color to data</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/31434053?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Jacquers picture"> <strong class="pr-1" dir="ltr">Jacquers</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/ngx-charts/325582698/observablefromevent-is-not-defined">observableFromEvent is not defined</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/1708938?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="workfel picture"> <strong class="pr-1" dir="ltr">workfel</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/swimlane/ngx-charts/issues/826" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>