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 flicker when new data is added to chart (Vue)
- Change the font size of chart.js with chartkick
- charts.js global options gridLines
- Chartjs time serie in wrong format
- "export 'default' (imported as 'Chart') was not found in 'chart.js'
- rotated partial doughnut chart with a point marker in chart.js agularJS
- How to add commas in thousands and to show decimal upto 2 places on X/Y axis in Angular chat JS?
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- Chart.js extra undefined column
- Format chart.js x-axis labels to specific timezone
- change space between horizontal (grid) lines for line chart
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- ChartJS 3+ x-axis only showing full moment object instead of just month
- ChartJS multiple sub labels for label
- Chart.js automatic chosen scale value
- How to stack time charts vertically
- chartjs hover over data without hoveringing on line
- Chart.JS change Text Color
- Tick - no negative
- Passing the same props while rendering different elements conditionally in React.js
- Chart.js -- using update() with time scale datasets
- How to load page containing Chart.js using jQuery
- Change Angular js charts.js chart type dynamically
- Chart.js: Is it possible to get the label of a dataset in a stacked bargraph on clicking it?
- chart.js 2.7.1 | Updating charts with variables
- Changing style of individual point Chart.js
- Iterate over query for use in Charts.js using Coldfusion
- Chart js 2.x renders the canvas invisible
- React chartjs-2 - Increase spacing between legend and chart
- impressions in google analytics is zero while sessions and users are more