<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom charts not working properly - visualizations - Redash Discourse</title>
<meta name="description" content="I’ve been using Custom JS charts for some of my visualisations, the line and bar ones worked fine, however I found some financial ones like waterfall, indicator (not working) didn’t work as intended or just didn’t work.
&hellip;">
<meta name="generator" content="Discourse 3.2.0.beta2-dev - https://github.com/discourse/discourse version 83621ccbe797223b48b624b00ef04f24672e1f03">
<link rel="icon" type="image/png" href="https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/1X/01e20869afc0877e3e5aee0f94419b9e9bffa961_2_32x32.ico">
<link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/1X/e1838a8a0c506503a22e0c60e2334374b2895c87_2_180x180.png">
<meta name="theme-color" media="all" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
<link rel="canonical" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214" />
<link rel="search" type="application/opensearchdescription+xml" href="https://discuss.redash.io/opensearch.xml" title="Redash Discourse Search">
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/color_definitions_base__2_8fd59ae1f286f43b3ff17996df07ea951685249d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" class="light-scheme"/>
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/desktop_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="desktop" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/checklist_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="checklist" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-adplugin_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-adplugin" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-akismet_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-akismet" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-cakeday_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-cakeday" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-chat-integration_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-chat-integration" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-details_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-details" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-footnote_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-footnote" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-lazy-videos_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-lazy-videos" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-local-dates_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-local-dates" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-narrative-bot_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-narrative-bot" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-presence_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-presence" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-solved_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-solved" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/discourse-spoiler-alert_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="discourse-spoiler-alert" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/hosted-site_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="hosted-site" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/poll_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="poll" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/poll_desktop_d86c892d7cd5311243d31a8f11787f4b0342874d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="poll_desktop" />
<link href="https://sjc6.discourse-cdn.com/standard17/stylesheets/desktop_theme_2_be4cb2b86ec06123c5e974acd20fd933d14b129d.css?__ws=discuss.redash.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="default"/>
<meta id="data-ga-universal-analytics" data-tracking-code="UA-47088186-6" data-json="{"cookieDomain":"auto"}" data-auto-link-domains="">
<link rel="preload" href="https://global.discourse-cdn.com/standard17/assets/google-universal-analytics-v3-08add7ec997ab472fcd9f821d32ff7caf4b8b9a5de2ec18ca723a040be07a098.gz.js" as="script">
<script defer src="https://global.discourse-cdn.com/standard17/assets/google-universal-analytics-v3-08add7ec997ab472fcd9f821d32ff7caf4b8b9a5de2ec18ca723a040be07a098.gz.js"></script>
<link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Custom charts not working properly'" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214.rss" />
<meta property="og:site_name" content="Redash Discourse" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://global.discourse-cdn.com/standard17/uploads/redash1/original/1X/e1838a8a0c506503a22e0c60e2334374b2895c87.png" />
<meta property="og:image" content="https://global.discourse-cdn.com/standard17/uploads/redash1/original/1X/e1838a8a0c506503a22e0c60e2334374b2895c87.png" />
<meta property="og:url" content="https://discuss.redash.io/t/custom-charts-not-working-properly/10214" />
<meta name="twitter:url" content="https://discuss.redash.io/t/custom-charts-not-working-properly/10214" />
<meta property="og:title" content="Custom charts not working properly" />
<meta name="twitter:title" content="Custom charts not working properly" />
<meta property="og:description" content="I’ve been using Custom JS charts for some of my visualisations, the line and bar ones worked fine, however I found some financial ones like waterfall, indicator (not working) didn’t work as intended or just didn’t work. Also it seems that redash doesn’t support subplots? Graphing codes were copied here: I suspected it was because the plotly lib wasn’t the latest version in redash, thus it didn’t support those charts. What could be the reasons? If it hasn’t updated to the latest version, is..." />
<meta name="twitter:description" content="I’ve been using Custom JS charts for some of my visualisations, the line and bar ones worked fine, however I found some financial ones like waterfall, indicator (not working) didn’t work as intended or just didn’t work. Also it seems that redash doesn’t support subplots? Graphing codes were copied here: I suspected it was because the plotly lib wasn’t the latest version in redash, thus it didn’t support those charts. What could be the reasons? If it hasn’t updated to the latest version, is..." />
<meta property="og:article:tag" content="visualizations" />
<meta property="article:published_time" content="2022-03-28T09:06:11+00:00" />
<meta property="og:ignore_canonical" content="true" />
</head>
<body class="crawler ">
<header>
<a href="/">
Redash Discourse
</a>
</header>
<div id="main-outlet" class="wrap" role="main">
<div id="topic-title">
<h1>
<a href="/t/custom-charts-not-working-properly/10214">Custom charts not working properly</a>
</h1>
<div class="topic-category">
<div class='discourse-tags list-tags'>
<a href='https://discuss.redash.io/tag/visualizations' class='discourse-tag' rel="tag">visualizations</a>
</div>
</div>
</div>
<div itemscope itemtype='http://schema.org/DiscussionForumPosting'>
<meta itemprop='headline' content='Custom charts not working properly'>
<meta itemprop='articleSection' content='Uncategorized'>
<meta itemprop='keywords' content='visualizations'>
<div itemprop='publisher' itemscope itemtype="http://schema.org/Organization">
<meta itemprop='name' content='Redash Discourse'>
<div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop='url' content='https://global.discourse-cdn.com/standard17/uploads/redash1/original/1X/c07bc573841e1e4a0013ea3b6fe088a1534228a3.png'>
</div>
</div>
<div id='post_1' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T09:06:11Z' class='post-time'>
March 28, 2022, 9:06am
</time>
<meta itemprop='dateModified' content='2022-03-28T09:06:11Z'>
<span itemprop='position'>1</span>
</span>
</div>
<div class='post' itemprop='articleBody'>
<p>I’ve been using Custom JS charts for some of my visualisations, the line and bar ones worked fine, however I found some financial ones like waterfall, indicator (not working) didn’t work as intended or just didn’t work.</p>
<p>Also it seems that redash doesn’t support subplots?</p>
<p>Graphing codes were copied here:</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://plotly.com/javascript/waterfall-charts/">
<header class="source">
<img src="https://plotly.com/img/favicon.ico" class="site-icon" width="16" height="16">
<a href="https://plotly.com/javascript/waterfall-charts/" target="_blank" rel="noopener nofollow ugc">plotly.com</a>
</header>
<article class="onebox-body">
<img src="https://images.plot.ly/plotly-documentation/thumbnail/waterfall-charts.jpg" class="thumbnail onebox-avatar" width="160" height="160">
<h3><a href="https://plotly.com/javascript/waterfall-charts/" target="_blank" rel="noopener nofollow ugc">Waterfall</a></h3>
<p>Over 12 examples of Waterfall Charts including changing color, size, log axes, and more.</p>
</article>
<div class="onebox-metadata">
</div>
<div style="clear: both"></div>
</aside>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://plotly.com/javascript/indicator/">
<header class="source">
<img src="https://plotly.com/img/favicon.ico" class="site-icon" width="16" height="16">
<a href="https://plotly.com/javascript/indicator/" target="_blank" rel="noopener nofollow ugc">plotly.com</a>
</header>
<article class="onebox-body">
<img src="https://images.plot.ly/plotly-documentation/thumbnail/indicator.jpg" class="thumbnail onebox-avatar" width="160" height="160">
<h3><a href="https://plotly.com/javascript/indicator/" target="_blank" rel="noopener nofollow ugc">Indicators</a></h3>
<p>Over 18 examples of Indicators including changing color, size, log axes, and more.</p>
</article>
<div class="onebox-metadata">
</div>
<div style="clear: both"></div>
</aside>
<p>I suspected it was because the plotly lib wasn’t the latest version in redash, thus it didn’t support those charts. What could be the reasons?</p>
<p>If it hasn’t updated to the latest version, is there anyway I can update the lib to its latest one?</p>
<p>Thanks</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/jesse'><span itemprop='name'>jesse</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T10:23:58Z' class='post-time'>
March 28, 2022, 10:23am
</time>
<meta itemprop='dateModified' content='2022-03-28T10:23:58Z'>
<span itemprop='position'>2</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>Without any specific information I’m not sure the community can help much here. You can try updating to a newer plotly though <img src="https://emoji.discourse-cdn.com/twitter/pray.png?v=12" title=":pray:" class="emoji" alt=":pray:" loading="lazy" width="20" height="20"></p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T10:27:23Z' class='post-time'>
March 28, 2022, 10:27am
</time>
<meta itemprop='dateModified' content='2022-03-28T10:27:23Z'>
<span itemprop='position'>3</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>Thanks for your response and apologise for the lack of info.</p>
<p>So basically I was just copying the code in plotly into the Custom Chart option in redash (to experiment the Custom Chart option). Most of the charts worked fine except those from the finance section (like the two attached above for example). Thus, I was thinking because the current version of plotly used by redash doesn’t support those charts and needs updating.</p>
<p>Any idea why this happened?</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/jesse'><span itemprop='name'>jesse</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T10:29:54Z' class='post-time'>
March 28, 2022, 10:29am
</time>
<meta itemprop='dateModified' content='2022-03-28T10:29:54Z'>
<span itemprop='position'>4</span>
</span>
</div>
<div class='post' itemprop='text'>
<aside class="quote no-group" data-username="eddiethinhvuong" data-post="3" data-topic="10214">
<div class="title">
<div class="quote-controls"></div>
<img loading="lazy" alt="" width="20" height="20" src="https://sjc6.discourse-cdn.com/standard17/user_avatar/discuss.redash.io/eddiethinhvuong/40/3873_2.png" class="avatar"> eddiethinhvuong:</div>
<blockquote>
<p>Thus, I was thinking because the current version of plotly used by redash doesn’t support those charts and needs updating.</p>
</blockquote>
</aside>
<p>Could be. What happens when you try updating to a newer plotly? Do you see any errors in your console when the charts don’t render?</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="2" />
</div>
</div>
<div id='post_5' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T10:33:50Z' class='post-time'>
March 28, 2022, 10:33am
</time>
<meta itemprop='dateModified' content='2022-03-28T10:33:50Z'>
<span itemprop='position'>5</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>I haven’t updated the lib since I wasn’t sure how. Could you show me please?</p>
<p>For the current version though, there was no error show. The chart’s grid still showed except the chart itself.</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_6' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/jesse'><span itemprop='name'>jesse</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-28T10:44:04Z' class='post-time'>
March 28, 2022, 10:44am
</time>
<meta itemprop='dateModified' content='2022-03-28T10:44:04Z'>
<span itemprop='position'>6</span>
</span>
</div>
<div class='post' itemprop='text'>
<aside class="quote no-group" data-username="eddiethinhvuong" data-post="5" data-topic="10214">
<div class="title">
<div class="quote-controls"></div>
<img loading="lazy" alt="" width="20" height="20" src="https://sjc6.discourse-cdn.com/standard17/user_avatar/discuss.redash.io/eddiethinhvuong/40/3873_2.png" class="avatar"> eddiethinhvuong:</div>
<blockquote>
<p>there was no error show.</p>
</blockquote>
</aside>
<p>Can you check your browser console for javascript errors?</p>
<aside class="quote no-group" data-username="eddiethinhvuong" data-post="5" data-topic="10214">
<div class="title">
<div class="quote-controls"></div>
<img loading="lazy" alt="" width="20" height="20" src="https://sjc6.discourse-cdn.com/standard17/user_avatar/discuss.redash.io/eddiethinhvuong/40/3873_2.png" class="avatar"> eddiethinhvuong:</div>
<blockquote>
<p>I haven’t updated the lib since I wasn’t sure how.</p>
</blockquote>
</aside>
<p>The plotly version is specified by the <code>package.json</code> file in the viz-lib directory. Update this and run <code>yarn install</code> should perform the upgrade.</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_7' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<link itemprop="image" href="https://global.discourse-cdn.com/standard17/uploads/redash1/original/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c.png">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-29T04:54:12Z' class='post-time'>
March 29, 2022, 4:54am
</time>
<meta itemprop='dateModified' content='2022-03-29T04:54:12Z'>
<span itemprop='position'>7</span>
</span>
</div>
<div class='post' itemprop='text'>
<p><div class="lightbox-wrapper"><a class="lightbox" href="https://global.discourse-cdn.com/standard17/uploads/redash1/original/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c.png" data-download-href="/uploads/short-url/bB3fyfzv4LFxV5CFd0e4kR5hZ9y.png?dl=1" title="image" rel="noopener nofollow ugc"><img src="https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c_2_690x322.png" alt="image" data-base62-sha1="bB3fyfzv4LFxV5CFd0e4kR5hZ9y" width="690" height="322" srcset="https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c_2_690x322.png, https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c_2_1035x483.png 1.5x, https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c_2_1380x644.png 2x" data-small-upload="https://global.discourse-cdn.com/standard17/uploads/redash1/optimized/2X/5/514825cfd25a0cfcd4e04d5aff946cb84eef5b6c_2_10x10.png"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1953×912 79 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
</div></a></div></p>
<blockquote>
<p>var data = [<br>
{<br>
type: “indicator”,<br>
mode: “number+delta”,<br>
value: 400,<br>
number: { prefix: “$” },<br>
delta: { position: “top”, reference: 320 },<br>
domain: { x: [0, 1], y: [0, 1] }<br>
}<br>
];</p>
<p>var layout = {<br>
paper_bgcolor: “lightgray”,<br>
width: 600,<br>
height: 200,<br>
margin: { t: 0, b: 0, l: 0, r: 0 }<br>
};</p>
<p>Plotly.newPlot(element, data, layout);</p>
</blockquote>
<p>Here’s the screen, there isn’t any error showed in the console. I also attached the code copied from the plotly site.</p>
<p>But if you try this code, the line part work, but the indicator one doesn’t</p>
<blockquote>
<p>var data = [<br>
{<br>
type: “indicator”,<br>
mode: “number+delta”,<br>
value: 492,<br>
delta: { reference: 512, valueformat: “.0f” },<br>
ticker: { showticker: true },<br>
vmax: 500,<br>
domain: { y: [0, 1], x: [0.25, 0.75] },<br>
title: { text: “Users online” }<br>
},<br>
{<br>
y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]<br>
}<br>
];</p>
<p>var layout = { width: 600, height: 450, xaxis: { range: [0, 62] } };<br>
Plotly.newPlot(element, data, layout);</p>
</blockquote>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_8' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-29T08:31:16Z' class='post-time'>
March 29, 2022, 8:31am
</time>
<meta itemprop='dateModified' content='2022-03-29T08:31:16Z'>
<span itemprop='position'>8</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>I have tried to update plotly and the result was still the same.</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_9' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-31T03:07:22Z' class='post-time'>
March 31, 2022, 3:07am
</time>
<meta itemprop='dateModified' content='2022-03-31T03:07:22Z'>
<span itemprop='position'>9</span>
</span>
</div>
<div class='post' itemprop='text'>
<p><a class="mention" href="/u/jesse">@jesse</a> Hi, could you help me with this issue please? Thank you <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_10' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/jesse'><span itemprop='name'>jesse</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-03-31T11:13:15Z' class='post-time'>
March 31, 2022, 11:13am
</time>
<meta itemprop='dateModified' content='2022-03-31T11:13:15Z'>
<span itemprop='position'>10</span>
</span>
</div>
<div class='post' itemprop='text'>
<aside class="quote group-Team" data-username="jesse" data-post="4" data-topic="10214">
<div class="title">
<div class="quote-controls"></div>
<img loading="lazy" alt="" width="20" height="20" src="https://sjc6.discourse-cdn.com/standard17/user_avatar/discuss.redash.io/jesse/40/3428_2.png" class="avatar"> jesse:</div>
<blockquote>
<p>Do you see any errors in your console when the charts don’t render?</p>
</blockquote>
</aside>
<p>Thanks for following up. I’m still wondering if you see any errors in your console when the chart doesn’t render.</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_11' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-04-04T06:40:35Z' class='post-time'>
April 4, 2022, 6:40am
</time>
<meta itemprop='dateModified' content='2022-04-04T06:40:35Z'>
<span itemprop='position'>11</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>Hi jesse, there was no error in the console when the chart didn’t render. It seems dash the chart type “indicator” wasn’t support for some reason (even after I updated the library to the newest version).</p>
<p>You can try the second block of code in my previous reply, which is a mix of line chart and indicator. The line was shown properly, whereas “indicator” didn’t render at all.</p>
<p>Would appreciate if you could help look into this issue. Having this type of chart is very useful to me, and I think others too because it shows a very intuitive, compact number to readers.</p>
<p>Thanks</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_12' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-04-06T03:07:26Z' class='post-time'>
April 6, 2022, 3:07am
</time>
<meta itemprop='dateModified' content='2022-04-06T03:07:26Z'>
<span itemprop='position'>12</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>Hi <a class="mention" href="/u/jesse">@jesse</a>, have you any update on this issue or any idea how I could fix it please? Thank you very much</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
<div id='post_13' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/eddiethinhvuong'><span itemprop='name'>eddiethinhvuong</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-04-12T02:52:50Z' class='post-time'>
April 12, 2022, 2:52am
</time>
<meta itemprop='dateModified' content='2022-04-12T02:52:50Z'>
<span itemprop='position'>13</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>Hi <a class="mention" href="/u/jesse">@jesse</a> , would really appreciate if you could help with the issue. I have tried several methods (including reinstall redash, upgrade viz-lib to the newest version, try different kind of codes) none worked for the indicator charts. For some reason, it wasn’t support by custom charts although other type of charts worked fine <img src="https://emoji.discourse-cdn.com/twitter/frowning.png?v=12" title=":frowning:" class="emoji" alt=":frowning:" loading="lazy" width="20" height="20"></p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="1" />
</div>
</div>
<div id='post_14' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'>
<div class='crawler-post-meta'>
<span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href='https://discuss.redash.io/u/jesse'><span itemprop='name'>jesse</span></a>
</span>
<link itemprop="mainEntityOfPage" href="https://discuss.redash.io/t/custom-charts-not-working-properly/10214">
<span class="crawler-post-infos">
<time itemprop='datePublished' datetime='2022-04-13T15:39:21Z' class='post-time'>
April 13, 2022, 3:39pm
</time>
<meta itemprop='dateModified' content='2022-04-13T15:39:21Z'>
<span itemprop='position'>14</span>
</span>
</div>
<div class='post' itemprop='text'>
<p>I have reproduced this behaviour, as have a few other posters in the last few years:</p>
<p><a href="http://discuss.redash.io/t/creating-map-with-custom-js-chart/6883" class="inline-onebox">Creating map with custom js chart</a></p>
<p>My only recommendation is to continue debugging, perhaps stepping through the javascript code to see if some exception is not being caught. Since a plot <em>does</em> appear but it’s empty, it’s possible that somewhere along the way the traces passed to the plot are being purged accidentally.</p>
<p>As Redash is a community project, we depend on contributions and assistance from others. I’m happy to answer questions or assist, but someone else will need to take the lead on this one.</p>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/LikeAction"/>
<meta itemprop="userInteractionCount" content="0" />
<span class='post-likes'></span>
</div>
<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
<meta itemprop="interactionType" content="http://schema.org/CommentAction"/>
<meta itemprop="userInteractionCount" content="0" />
</div>
</div>
</div>
</div>
<footer class="container wrap">
<nav class='crawler-nav'>
<ul>
<li itemscope itemtype='http://schema.org/SiteNavigationElement'>
<span itemprop='name'>
<a href='/' itemprop="url">Home </a>
</span>
</li>
<li itemscope itemtype='http://schema.org/SiteNavigationElement'>
<span itemprop='name'>
<a href='/categories' itemprop="url">Categories </a>
</span>
</li>
<li itemscope itemtype='http://schema.org/SiteNavigationElement'>
<span itemprop='name'>
<a href='/guidelines' itemprop="url">FAQ/Guidelines </a>
</span>
</li>
<li itemscope itemtype='http://schema.org/SiteNavigationElement'>
<span itemprop='name'>
<a href='http://redash.io/terms.html' itemprop="url">Terms of Service </a>
</span>
</li>
<li itemscope itemtype='http://schema.org/SiteNavigationElement'>
<span itemprop='name'>
<a href='http://redash.io/privacy.html' itemprop="url">Privacy Policy </a>
</span>
</li>
</ul>
</nav>
<p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p>
</footer>
</body>
</html>