score:1
i've searched and found this comment:
be sure you don't have the dataset barthickness value set, or it will override the barpercentage setting. philip f
i change the chart settings as follows:
mychart = new chart(document.getelementbyid('thischart'), {
type: 'bar',
data: {
labels: myscales,
datasets: [{
backgroundcolor: 'rgba(54, 162, 235, 0.6)',
bordercolor: 'rgba(54, 162, 235, 1.0)',
data: myvalues,
barthickness: 16 //
}]
},
options: option
});
here is the working jsfiddle.
full code:
var thischart = null;
var myscales = [];
var myvalues = [];
var numbars = 50;
var option = {
responsive: true,
maintainaspectratio: false,
interaction: {
intersect: false,
mode: 'nearest'
},
scales: {
x: {
display: true,
grid: {
drawonchartarea: false,
drawticks: false
}
},
y: {
max: 100,
grace: '5%',
grid: {
drawticks: false
},
display: true
}
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
},
hover: {
mode: null
}
}
};
mychart = new chart(document.getelementbyid('thischart'), {
type: 'bar',
data: {
labels: myscales,
datasets: [{
backgroundcolor: 'rgba(54, 162, 235, 0.6)',
bordercolor: 'rgba(54, 162, 235, 1.0)',
//borderwidth: 2,
data: myvalues,
barthickness: 16,
//categorypercentage: 1.0,
//barpercentage: 0.1
}]
},
options: option
});
for (var i = 1; i != numbars; i++) {
myscales[i] = i;
myvalues[i] = math.floor(math.random() * (100 - 50 + 1) + 50);
}
displaygraph();
function displaygraph() {
// remove the old data
mychart.data.labels.pop();
mychart.data.datasets.foreach((dataset) => {
dataset.data.pop();
});
mychart.update();
// add in the new data
mychart.data.labels = myscales;
mychart.data.datasets.foreach((dataset, i) => {
dataset.data = myvalues;
});
if (myvalues.length > 100) {
mychart.data.datasets.foreach((dataset, i) => {
dataset.barpercentage = 1.0; // remove gap between bars
dataset.borderwidth = 0; // remove bar border
dataset.backgroundcolor = 'rgba(54, 162, 235, 1.0)'; // remove transparency
});
} else {
mychart.data.datasets.foreach((dataset, i) => {
dataset.barpercentage = 0.8; // default width of gap between bars
dataset.borderwidth = 2; // default bar border
dataset.backgroundcolor = 'rgba(54, 162, 235, 0.6)'; // default bar background colour
dataset.bordercolor = 'rgba(54, 162, 235, 1.0)'; // default bar border colour
});
}
mychart.update();
}
function switchbars() {
if (numbars == 50) { // toggle number of bars
numbars = 120;
} else {
numbars = 50;
}
myscales.length = numbars;
myvalues.length = numbars;
for (var i = 1; i != numbars; i++) {
myscales[i] = i;
myvalues[i] = math.floor(math.random() * (100 - 50 + 1) + 50);
}
displaygraph();
}
.chart-container {
width: 100vw;
height: 60vh;
margin-top: 4em;
position: relative;
}
canvas {
display: block;
margin-left: 2em;
margin-right: 2em;
}
.styleselectorbutton {
width: 100vw;
height: 5em;
margin-top: 1em;
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.min.js"></script>
<div class="chart-container">
<canvas id="thischart"></canvas>
</div>
<div id="selectorbutton" class="styleselectorbutton">
<input type="button" onclick="switchbars()" class="button" value="switch">
</div>
Source: stackoverflow.com
Related Query
- Artefacts when showing compact vertical bar chart in chart.js
- Chartjs Bar Chart showing old data when hovering
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Moving vertical line when hovering over the chart using chart.js
- Vertical stacked bar chart with chart.js
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Line chart is showing under bar in combochart in chartjs
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Vertical Bar Chart not displaying Correctly
- chart js chart bar chart not showing data from 0
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- Bar Chart Not Stacking When Using ChartJs
- Want to show small part of js Bar Chart when value is zero
- Chart JS Layered Vertical Bar Chart
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- Chartjs bar chart appears empty when page loads
- ChartJS not showing data for time series bar chart
- Vertical align bar chart from chart.js not working
- Vertical stacked bar chart using SharePoint List
- Chart.js colors in bar chart not showing
- Angular-Charts bar chart does not update when I change the data, series, labels
- Why is Chart js first bar too small or not showing at all?
- chart js: when all the values passed to data are zeros, nothing is showing
- Bar Chart not displaying when using chart.js
- Bar chart from Chart.js not showing the second dataset
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
More Query from same tag
- How to set minimum height for bars graph
- How can I increase the size of the pie (Chart.JS)?
- Using chartjs-plugin-annotation with ng2-charts
- Getting "undefined" trying to create a function
- How to disable event during a state change
- getElementById on element from parent component returns null, when called in ngAfterViewInit() of child component
- How to send data from struts2 to a javascript function to draw a chart
- Change size of a specific point on a line chart in Chart.js
- Why doesn't my donut chart, created with Chart.js, appear?
- Pass objects from javascript to Chart.JS through EJS
- Cannot change font color and box width in chart
- How to use dates as X axis with Chart.js even when there is no Y axis value related
- Inserting data from controller to an array in javascript
- Properly scaling xAxis with time in chart.js
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- Radar Chart, Chart.js v3.2 labels customization
- Chart options in angularJs (NodeRed Charts)
- Automatic label updates
- How to change chart.js grid, and axis color?
- Uncaught TypeError: t.ticks.map is not a function, Chart.JS
- How to disable converting decimal number to exponential?
- ChartJS - Y Axis line not drawing
- Can I add some variables to my chart.js in page know that variables?
- Chartjs with Backbone
- Old data flickering after hover on line graph Chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- How To Match Left and Right Tick Intervals with Chartjs
- How to keep rounded bar corners when data is filtered chartJs?
- How to add variable-pie chart to react project?