score:0
Accepted answer
it's showing like this because canvas's aspect ratio is changing automatically with window size but you've set your div to a specific height of 100px
. that's why canvas has placed outside of the div while window size is extending. just to get rid of that problem, set maintainaspectratio: false
in your option in this way:
var barchartdata = {
labels: [""],
datasets: [{
label: "1",
backgroundcolor: "rgba(68,222,166,1)",
barthickness: 50,
data: [177]
},
{
label: "2",
barthickness: 50,
backgroundcolor: "rgba(218, 65, 102, 1)",
data: [170]
}
]
};
var optionsbar = {
maintainaspectratio: false,
legend: false,
title: {
display: false
},
scales: {
xaxes: [{
stacked: true,
display: false
}],
yaxes: [{
stacked: true,
display: false
}]
}
};
var ctx = document.getelementbyid("chart");
var mychart = new chart(ctx, {
type: 'horizontalbar',
data: barchartdata,
options: optionsbar
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.min.js"></script>
<body style="background-color: grey;">
<div id="chartdiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div>
</body>
Source: stackoverflow.com
Related Query
- HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
- React chart : prevent chart's canvas scaling with height and width
- Css style not working well when resizing chart height in angular application
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Unable to set width and height on canvas in chart js
- Chartjs bar chart blurry when height is set
- Chart.js adds unwanted padding on top and below chart with padding set to 0
- Set height of chart in Chart.js
- set background color to save canvas chart
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Why would a ChartJS chart end up with width 0 and height 0?
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- canvas fill text vanishes when hovering over chartjs pie chart
- Chart Js update legend boxes of graph with graph line style
- Responsive Chart.js Doughnut Chart with minimum height
- Bar chart with min height and zero values - ChartJs
- Chart JS tooltip appears differently when set from script instead of html
- How to set X coordinate for each bar with react chart js 2?
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- Chart.js canvas and chart width gets overwritten when redrawn
- Binding Chart to Canvas height width
- Chartjs does not render chart when set responsive option to true
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- Chart js with problems when using too many series
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- Eror: chart.min.js:13 Uncaught (in promise) Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused
- what is wrong with my code ? java script chart position
- Dynamically set chart type with Angular Chart?
- ChartJs does not render chart when binding canvas id in Angular
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
More Query from same tag
- How to change line segment color based on label value in chart.js?
- Getting x,y values from chart click event
- how can I render multiple charts in chartjs?
- Populate chartjs ajax with datetime fields
- Label is not showing in ChartJS
- How to Create Single line bubble Chartjs chart?
- How can i add a calculated value on top of the bars in Chart.js?
- How to plot a line graph with x and y data
- Django chart.js multi axis line chart
- How to draw a line in line chart for single value in Charts.JS
- How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?
- Chart.js how to display multiple labels on multi bar stacked chart
- How to add new data point and remove leftmost data point dynamically in Chartjs
- angular-chart zero dimensions inside angular-strap panel
- chartjs push array to label not working
- Update the Chartjs push data with ajax
- Configuring a Radar Chart w/Chart.js
- ChartJS onclick fill area (Radar Chart)
- Different styles in ticks on ChartJS
- How to insert php in data chart.js
- Chart.js showing nothing on canvas
- How to compute x,y values from a click event using x,y pixel coordinates in ChartJS?
- Extend chart.js horizontal bar graph to include a vertical line
- Add space Between Columns in Bar chart. chartjs
- chart.js label and value overlap issue
- How to correctly passed php mysql data to ChartJs
- What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js
- How can we build charts on Polymer 1.0 using Chart.js?
- chart.js version 2.4.0 does not display bars for me
- Why is my Line Chart not displaying (Chart.JS)?