Horizontal bar graphs with javascript

Question

Hello Members, Hope you are doing good!! can any one guide me on creating the horizontal bar graphs. Here am adding the image for reference.

Laxmidhar Sahoo · Answer

html > head > head > body > canvas id = "myChart" width = "400" height = "400" > canvas > script src = "https://cdn.jsdelivr.net/npm/chart.js@2.8.0" > script > script > var ctx = document .getElementById('myChart'); var myChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); script > body ?

Akshay Shedwad · Answer

Follow below link, Aspsnippset Explain step by step how to design Google chart with source code https://www.aspsnippets.com/Articles/Google-Bar-Chart-example-with-database-in-ASPNet-using-C-and-VBNet.aspx

Ano Mepani · Answer

You can find Horizontal charts and other different charts and usage with different charts library as well. Visualization hub : https://visualizationhub.github.io/ Dynamics Charts based on different Library(C3JS, HughCharts, TUI Charts etc): https://visualizationhub.github.io/DynamicCharts.html CsharpCorner Visulization : https://visualizationhub.github.io/csharpcorner-dashboard.htm All Sample data and code is available at : https://github.com/VisualizationHub/visualizationhub.github.io

Mas · Answer

@Laxmidhar Sahoo Can you guide me on how can we remove the rectangle box from this bar graph. Thank you in advance!!

Mas · Answer

How can we create horizontal graph for dynamic data. Can any one guide me here with AJAX data

Jignesh Kumar · Answer

Hi, You can use this link which will help you, https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#7-horizontal-bar-chart https://stackoverflow.com/questions/40254027/horizontal-bar-chart-in-chart-js

Rajanikant Hawaldar · Answer

https://plotly.com/javascript/horizontal-bar-charts/

Horizontal bar graphs with javascript

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (7)