ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display Bar and Line (mixed) chart in single chart using ChartJS in AngularJS<p>Hi <a class="username" rel="skp"> skp</a>,</p> <p>Use mixed type charts.</p> <p>For more details refer below link.</p> <p><a href="http://jtblin.github.io/angular-chart.js/">http://jtblin.github.io/angular-chart.js/</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;Mixed type charts&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [&#34;chart.js&#34;]); app.controller(&#34;MyController&#34;, function ($scope) { $scope.driveDataJson = { &#34;data&#34;: [[65, 25, 80, 49], [28, 59, 40, 19]], &#34;labels&#34;: [&#34;January&#34;, &#34;February&#34;, &#34;March&#34;, &#34;April&#34;], &#34;options&#34;: { title: { display: true, text: &#39;Based on Quantity(Nos.)&#39;, fontSize: 18, position: &#39;bottom&#39; } } }; $scope.labels = $scope.driveDataJson.labels; $scope.data = $scope.driveDataJson.data; $scope.options = $scope.driveDataJson.options $scope.datasetOverride = [{ label: &#34;Bar chart&#34;, borderWidth: 1, type: &#39;bar&#39; }, { label: &#34;Line chart&#34;, borderWidth: 2, hoverBackgroundColor: &#34;rgba(255,99,132,0.4)&#34;, hoverBorderColor: &#34;rgba(255,99,132,1)&#34;, type: &#39;line&#39; }]; }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;base&#34; class=&#34;chart-bar&#34; chart-data=&#34;data&#34; chart-labels=&#34;labels&#34; chart-options=&#34;options&#34; chart-dataset-override=&#34;datasetOverride&#34; width=&#34;500%&#34;&gt; &lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/364755/Display-Bar-and-Line-mixed-chart-in-single-chart-using-ChartJS-in-AngularJS/https://www.aspforums.net:443/Threads/364755/Display-Bar-and-Line-mixed-chart-in-single-chart-using-ChartJS-in-AngularJS/Fri, 09 Aug 2019 02:23:05 GMT