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
- Angular chart.js chart scale
- Chart.js passing value data dynamic
- Chart.js - add data to line chart from clicking pie chart segment
- How do I obtain a Chart instance for Chart.js
- ChartJS - zIndex value for points/tooltips?
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
- Chartjs-gauge create circumference until certain value from data
- How to reduce the distance between yAxes in Chart.js?
- How to lazy evaluate and execute javascript?
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Using epoch as time series on x axis in react-chartjs-2 not showing correct date
- How to use variable for data in Charts.js Pie Chart?
- Old data flickering after hover on line graph Chart.js
- How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)
- Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?
- How to add label square to Bar Chart using Chart.js
- Creating a chart
- Accordion won't take up height of chart for first click
- How to add commas in thousands and to show decimal upto 2 places on X/Y axis in Angular chat JS?
- Add some Text Inside of the Tooltip
- how to programmatically make a line chart point active/highlighted
- How to create a line on a chart using chartjs-plugin-annotation
- ChartJS Update specific bar's background colour
- Dynamic array javascript
- How to create two pie charts using Chart.js API?
- How to change the font size of yAxis ticks in chartJs?
- How to combine lines with different starting points in chartjs
- Dynamically create chart with Chart.js and PHP
- ChartJS: Get individual values minus another value in the custom legend
- Chartjs, scatter with For-Loop