score:2
Accepted answer
as described in the documentation this can be done using the crossalign
property:
var options = {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: 'pink'
}]
},
options: {
indexaxis: 'y',
scales: {
y: {
ticks: {
crossalign: 'far'
}
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?
- How to set labels align left in Horizontal Bar using chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to display the labels in doughnut chart using ng2 charts?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How to use set the color for each bar in a bar chart using chartjs?
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- chart.js: How do I make the radar chart axis labels bigger?
- Labels (category type) on left and right of bar chart using chart.js?
- How to show the chartjs bar chart data values labels as text?
- How to add labels on top of the chart bar with Chart.js 2
- How to remove the extra Y axis from a bar chart in chart.js
- Chart.js how to display multiple labels on multi bar stacked chart
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How to fix a stacked logarithmic bar chart values to fit the grid
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How to show bar chart labels clearly using ChartJS?
- Show the latest labels in a bar chart with React.js using react-chartjs
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- In Chart.js, how do I hide certain axis labels from a stacked bar chart?
- How can I automatically rescale the y axis of my log chart using ChartJS?
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add text inside the doughnut chart using Chart.js?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to add text in centre of the doughnut chart using Chart.js?
More Query from same tag
- Chart.js Error: You may need an appropriate loader to handle this file type
- I want to add label on only specific vue chart
- Chart.js: how to listen to hover/click events outside of plot area?
- Building a 24h visualisation with chartjs
- How to set axes' step size in Chart.js 2?
- how to pass the value of input to my bar chart
- remove strikethrough behavior in chart.js bar chart
- Pass variable from function js to other function js
- JS Chart: do not merge duplicate x axis labels
- ChartJS Update Tooltip programmatically in V2
- Chartjs: Make some ticks (Sunday, Saturday) red
- Chart js background color changes on click
- Multiple charts not loading on the same page
- chart.js cuts off canvas - but padding makes doughnut very small
- How to remove transparency from bar charts?
- Changing width and height in angular-chart.js module
- attempting to change height and width of canvas for chart
- Define new position for tooltip in ng2-charts
- what is error can't acquire context from the given item?
- Chartjs line chart gets all scrambled up when an x value coincides with a label
- Cursor pointer change onhover not working in chartjsv3
- Calculate the average distance between two data sets of X and Y (in JS)
- how change color of labels of legends of chart.js
- How to hide other section of chartjs on click of lengend
- Script error : "Uncaught SyntaxError: Unexpected identifier"
- Chat js with respose ajax
- ChartJS row size
- Chart.js options and documentation
- My charts doesn't work after inserting X-axis
- How to add an array to my line data?