score:1
remove this barthickness: 40,
(40 in pixels). in your case "no space/room" for such width = overlaps & broken layout.
https://www.chartjs.org/docs/latest/charts/bar.html#barthickness
basic snippet (base on your code) (change barthickness
barpercentage
barpercentage
):
https://www.chartjs.org/docs/latest/charts/bar.html#barpercentage-vs-categorypercentage
var canvas = document.getelementbyid("mychart");
var ctx = canvas.getcontext("2d");
var _datesforlabel = ["2020-02-10",
"2020-02-13",
"2020-02-17",
"2020-02-18",
"2020-02-19",
"2020-02-20",
"2020-02-21",
"2020-02-22",
"2020-02-23",
"2020-02-24",
"2020-02-25",
"2020-02-26",
"2020-02-27",
"2020-02-28",
"2020-02-29",
"2020-03-01",
"2020-03-02",
"2020-03-03",
"2020-03-04",
"2020-03-05",
"2020-03-07",
"2020-03-08",
"2020-03-09",
"2020-03-10","2020-02-10",
"2020-02-13",
"2020-02-17",
"2020-02-18",
"2020-02-19",
"2020-02-20",
"2020-02-21",
"2020-02-22",
"2020-02-23",
"2020-02-24",
"2020-02-25",
"2020-02-26",
"2020-02-27",
"2020-02-28",
"2020-02-29",
"2020-03-01",
"2020-03-02",
"2020-03-03",
"2020-03-04",
"2020-03-05",
"2020-03-07",
"2020-03-08",
"2020-03-09",
"2020-03-10"]
var _chartdatawithoptions =[];
_chartdatawithoptions.push({
label:"dataseries1",
data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
backgroundcolor:"blue"
})
_chartdatawithoptions.push({
label:"dataseries2",
data:[2,3,4,5,6,7,8,9,10,12,13,11,10,19,14,12,11,18,26,23,21,28,24,2,3,4,6,9,1,2,1,11,12,13,14,15,16,17,18,19,20,21,22,23,11,22,4,6,3,6],
backgroundcolor:"red"
})
var config = {
type: 'bar',
data: {
labels: _datesforlabel,
datasets: _chartdatawithoptions,
borderskipped: 'top'
},
options: {
// responsive: true,
tooltips: {
// mode: ''
},
plugins: {
colorschemes: {
scheme: 'office.waveform6'
}
},
scales: {
yaxes: [{
ticks: {
min: 0,
}
}],
xaxes: [{
// barthickness: 40, // number (pixels) or 'flex'
maxbarthickness: 40,
barpercentage: 1,/* change this */
categorypercentage: 0.5,/* change this */
ticks: {
min: 0,
},
}]
}
}
};
mybarchart = new chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js" ></script>
<div style="height: 500px; width: 100%;">
<canvas id="mychart" ></canvas>
</div>
about "set labels without rotation" - again "no room" - by maxrotation: 0,
- full answer + example her: chart js change label orientation on x-axis for line charts
"to much points/data" issue:
for now "no way" to auto group data - one idea is to use
stacked: true
("save room") - or manually filter your data (show fewer points - related stackoverflow q: chartjs 2 scaling lots of data points).
- related github feature request: https://github.com/chartjs/chart.js/issues/4053
Source: stackoverflow.com
Related Query
- Add space Between Columns in Bar chart. chartjs
- How to add space Between Columns in Bar chartjs and remove the space in the end
- ChartJS add tooltip to a grouped bar chart
- to increase space between x axis and first horizontal bar in chart js
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How to add space to the bottom of the chart in chartjs [angular]
- ChartJS add custom tooltip to a stacked bar chart
- ChartJS - How to add Text between Pie Chart and Legend
- chartjs add dots to bars in grouped bar chart
- Add Space Between Bars in Angularjs Chartjs
- Chartjs Bar Chart add background color to value labels
- How to add space between datasets in ng2 doughnut chart
- Add space between point of the chart and of the border chart in react-chartjs-2
- Add a click event to the bar chart of chartjs
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Chartjs Bar Chart showing old data when hovering
- Chartjs v2.0: stacked bar chart
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- Changing fontFamily on ChartJS bar chart
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs Bar Chart Legend
- Add DataSet Bar Chart - Chart.JS
- Click event on stacked bar chart - ChartJs
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js - Add gradient to bar chart
- ChartJS bar chart with legend which corresponds to each bar
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
More Query from same tag
- chart.js sum of the last 3h datavalues in a line chart
- Angular2 and ng2-charts does not display any graph
- Using Chart.js with Gatsby markdown
- Chart.js - hide / remove label on second dataset
- How to update data Chart in async way in Angular Chart.js?
- JSON Data in javascript
- Add a click event to the bar chart of chartjs
- How to pass an array to chart.js data:[] while creating a chart in php
- High and low points on chart getting cut off
- Chartjs Different Fill Color For Overlap Area
- ChartJS Data Overflowing Chart area
- Can't render two charts on the same page from chart.js
- Is it possible to pot a line chart of date vs time in ChartJS?
- stepsize x-axe with time string labels
- Adjust legend element alignment for chart.js
- "Maximum call stack size" Error When Adding Data to Chartjs Using Props With Fetch (Vue/Chartjs)
- how to draw line graph with line animation from left to right using chartjs?
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- Different gridline steps on chart js line chart
- Error with Chart.js : TypeError: t is undefined
- Chart.js not rendering chart with data from mySQL database
- vue-chart.js : Data available as computed properties, but not showing in chart
- How can I change the color of certain lines in chartjs / vue-chartjs?
- How to get multiple elements on a page using flask (tables, pie charts, etc.)
- ChartJS Bar Issue - Showing "zeros" and not center bars
- issue populating chart.js from entity framework in .Net Core 5
- How to hide the labels of graphs that are not toggled in ChartJS
- Chart.js plotting two json datasets on a line chart
- Chart bundle js is not showing dynamic data
- Levels is overlapping in angular-chart.js