score:0
Just add height
tag in canvas
element. This solved for me.
<canvas id="Chart" height="50">
score:1
You have the barThickness
option as mentionned in the docs here -> http://www.chartjs.org/docs/#bar-chart-chart-options
score:1
While this is not an official fix, it worked for me. I took advice from this link, https://github.com/chartjs/Chart.js/issues/2787
I store all my values within multiple arrays, so count number of objects and multiply by a specific number and set height of your chart wrapper ( div around the chart ).
<div class="chart-wrapper horizontalBar" style="position: relative; height: 50vh;">
<canvas id="chart-location"></canvas>
</div>
Then after the chart is drawn, set the height (location_labels is an array housing all my labels)
$( ".horizontalBar" ).height(location_labels.length * 30);
score:2
Simply increase the canvas height. For Example;
<canvas id="horizontalbar" height="1000px"></canvas>
Source: stackoverflow.com
Related Query
- Chart JS horizontal bar chart width of bars and the chart
- chart js 2 how to set bar width
- Horizontal stacked bar chart with chart.js
- Horizontal bar chart in chart.js
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Chart.js horizontal bar width
- Creating a horizontal bar chart extension on Chart.js
- Chart js - Get bar width after render
- How to draw Horizontal line on Bar Chart Chartjs
- Stacked horizontal bar chart along total count with chart.js
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- two xAxes horizontal bar chart Charts.js
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- ChartJS bar chart fixed width for dynamic data sets
- How to change Chart.js horizontal bar chart Width?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- to increase space between x axis and first horizontal bar in chart js
- Draw a horizontal bar chart from right to left
- Remove padding from chartJs horizontal bar chart
- Horizontal bar with two yaxes chart js
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- ChartJS horizontal chart display legend on each bar
- Chart.js horizontal line chart or modified horizontal bar chart
- ChartJS: how to make a bar chart with a horizontal guideline:
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Stacked Mixed Horizontal Bar Chart in Charts.Js Axes Positioning
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Horizontal gradient for every single bar in group chart js
More Query from same tag
- Full size download Chartjs canvas on mobile device
- Trying to have Doughnut chart with dql result chartjs
- Adding chartjs-plugin-datalabels to Chart.js in Aurelia
- How to set prop data for chart.js in React?
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- Chartjs in Reactjs - how can I update data dynamically?
- How could I implement chartjs-plugin-datalabels in chartjs-node-canvas?
- Displaying a chart using Chart.js
- using library without 'require' when using CDN
- How do I remove left-hand numeric values in Bar Chartjs?
- Chartjs radar indexed labels
- Export HTML content with Chart.jscanvases to PDF
- Chart.js radar chart ticks are hidden behind the graph
- chartjs stepSize by 5
- ChartJS react-chart-js2 Options not working
- JS node chart from SQL Server not updated
- Always show doughnut Chart tooltip in Angular 5
- How to parse a Chart using data from a nested object in ChartJS
- How to update with animation a Pie Chart?
- how to use chartjs graph in a *ngFor loop
- Unable to get the expected legend shown in chart js
- How to plot a line graph with x and y data
- Graph is not displayed
- Javascript in wordpress causes SyntaxError
- How to dynamically set ChartJs line chart width based on dataset size?
- Boxplot chartjs make min and max dynamic by leaving some space on both side
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- How to push element in array in a certain structure
- Vue-Chartjs reactive chart options passing