score:18
Accepted answer
I believe you can get the result you want by using the max
parameter on the ticks
configuration of the x axes.
By using 2 different x axes with different maximums you can label the bars differently from how they're drawn. Resulting in labeling the marks in between the bars without drawing an extra "empty" bar.
var ctx = document.getElementById("myChart").getContext('2d');
var dataValues = [12, 19, 3, 5];
var dataLabels = [0, 1, 2, 3, 4];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dataLabels,
datasets: [{
label: 'Group A',
data: dataValues,
backgroundColor: 'rgba(255, 99, 132, 1)',
}]
},
options: {
scales: {
xAxes: [{
display: false,
barPercentage: 1.3,
ticks: {
max: 3,
}
}, {
display: true,
ticks: {
autoSkip: false,
max: 4,
}
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
canvas { max-width: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>
Source: stackoverflow.com
Related Query
- How can I make two of my lines in Chart JS thicker
- Can't make chart js responsive
- Make a Histogram in Chart.js
- How can I make a stepline or stepped chart in chart.js or D3?
- Make pie chart smaller Chart JS
- Angular-chart.js - Make line chart does not curve
- how to make a chart.js bar chart scrollable
- how to programmatically make a line chart point active/highlighted
- How to make Chart JS responsive?
- Make months on x-axis clickable on chart.js line chart
- How to make bar chart animation where all bars grow at the same speed?
- How to make a chart scroll horizontally (when using Chart.js)
- How can I make line on chart thinner?
- Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?
- How to make a chart with an associative array with chart.js?
- ChartsJS make number in middle for only one chart
- ChartJS: how to make a bar chart with a horizontal guideline:
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- chart.js: How do I make the radar chart axis labels bigger?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to make the chart smaller than its container
- How to make dynamic chart using Vue component with chart-js
- Chart.js - how to make proportional intervals on X axis on line chart
- How do i make a new chart by pressing a button (chart.js)?
- How to make Chart.js Bubble chart with ng2-chart?
- how to make doughnut chart portions, buttons
- How do you make a progressive line chart with time as the X axis?
- How can I make streaming chart with react?
- How to make bar chart cover multiple labels?
More Query from same tag
- Chart.js - remove labels
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- Horizontal Bar-Chart in angular-chart.js
- Gantt Chart Timeline Chart js 3
- this.map.tick is not a function
- Chart.js - tooltips issue with multiple charts
- ChartJS do not render any legend if the label is falsy
- Change color of line along labels Chart.js
- Ajax call to trigger a controller function
- PrimeFaces PolarArea Chart - GridLine Color Change
- Chart.js showing old chart on hover
- Chart.js legend is undefined
- ChartJS number shows up on top of number
- I want to put my data in chartjs-plugin-streaming
- Change locale for Chart.js in React
- Chartjs: Is it possible to add phases in line chart?
- I have a issue with chart.js, php and infomix database?
- angular directive is not working with chartjs
- Chart js space above bar graph
- ChartJs - pie chart not showing
- Chart.js with JSON data error
- chart.js? Specifically Radar Charta and Negative Numbers
- Automatic label updates
- ChartJS in Datatable cell performance
- Detect if the click is in bar or outside of bar in ChartJS
- how to display bars in chartjs
- Re-compile JSON data to make less rows
- How to change bar fillColor in chart.js bar char
- Can't load multiple charts onto a page when looping through dummy array
- HTML tags enable in Default tooltip labels in chart.js