score:8
it is certainly possible to achieve a 'right' aligned scale tick label instead of the original 'center' aligned scale tick label, but unfortunately it is not very straight forward to implement. let me walk you through how to do it and then provide an example.
1) first, since there is no configuration option to control this, we have to look at doing some sort of custom implementation. it turns out that the scale tick labels in a bar chart are rendered as part of the category
scale's draw method. therefore, we must somehow overwrite this draw
method to change to a new alignment.
2) according to the api there is a documented way to create new scale types, so we should be able to use a similar approach to extend the category
scale type and overwrite it's draw
method.
since all scales are wrapped up in the scaleservice
we have to use the below approach to extend an existing scale type.
var categoryrightaligned = chart.scaleservice.getscaleconstructor('category').extend({});
3) now its just a matter of figuring out what part of the draw
method we need to modify. after looking it over, it looks like we need to change the logic for calculating labelx
(the pixel position to render the tick label). here would be the new logic.
// current logic for getting pixel value of each label (we will use the logic below to
// adjust if necessary)
labelx = me.getpixelfortick(index, gridlines.offsetgridlines) + optionticks.labeloffset;
// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getdatasetmeta(0);
// use the bart chart controller to calculate the bar width
var barwidth = meta.controller.calculatebarwidth(meta.controller.getruler());
// if the labels are rotated, then move the pixel location from the middle of the bar
// to the far right of the bar
if (labelrotationradians != 0) {
labelx += barwidth / 2;
}
4) now we just need to register our new scale and configure the chart to use it (instead of the bar chart default category scale).
chart.scaleservice.registerscaletype('categoryrightaligned', categoryrightaligned, {position: 'bottom'});
xaxes: [{
type: 'categoryrightaligned',
gridlines: {
display : false,
offsetgridlines: true
},
ticks: {
beginatzero:true,
}
}]
refer to this jsfiddle example to see it in action and to see how everything fits together.
Source: stackoverflow.com
Related Query
- Handle X-axis label position in chart js
- 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
- Chart Js change text label orientation on Ox axis
- show label in tooltip but not in x axis for chartjs line chart
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Map event position to y axis value in chartjs line chart
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- how to label axis within radar chart with chart.js
- display vertical axis label in line chart using chart.js
- Chart Js reduce text size for label on X axis
- How to stop axis label from being cut off in chart JS?
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- what is wrong with my code ? java script chart position
- Move chart x axis label and borders
- Chart.js bar chart change the label position X-axis
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Chart.js move start position of chart from axis
- In Chart.js set chart title, name of x axis and y axis?
- Chart Js Change Label orientation on x-Axis for Line Charts
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart.js bar chart : Grid color and hide label
- Chart JS - set start of week for x axis time series
- How to wrap X axis labels to multi-lines (X axis label formatting) in ng2-Charts?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js Dynamically Updating Chart with X Axis Time
- Chart JS show multiple data points for the same label
- How do I change the 'months' language displayed on the date axis in Chart JS?
More Query from same tag
- How to decrease the barthickness in ng2-charts?
- Ng2 charts - Animation doesn't work on line chart onInit
- How to catch an onClick event on bubble chart?
- How to put back the data with a switch?
- Chart.js doughnut chart tooltip size?
- Why is view width working, but not view height? Super new to coding and chart.js
- chartjs-plugin-annotation box in Django app
- Pass List of Objects as data
- How to ignore points with same value in Chart.js
- Chart.js shows no graphs
- How put dataset labels into multiTooltipTemplate?
- How to make bar chart animation where all bars grow at the same speed?
- Adding chartjs-plugin-datalabels to Chart.js in Aurelia
- Dynamic multiple charts in chart.js with dynamic data inside them
- How to make label always visible on DoughnutChart.js
- Reference external JS method in Chart.js callback using Chartjs.ror
- Chart JS, backgroundColor not showing
- ChartJS - Override Attributes (AngularJS)
- How to increase Chart.js yAxes' height to prevent overlapping
- Passing SQL results from controller to chart.js
- Chart.js animate chart after clicking a button
- X-axis of Chart.js not taking type : 'time'
- Chart.js (line chart) tooltip duration/delay
- How to add background image in bar chart column in Chart.js?
- Second dataset with single point makes y axis too big on Chart.js
- How to delete a chart (canvas) out of its scope?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- chart.js Multiple barchart in time scale won't display all
- Plot time on Y axis
- Iterating through the same dataset in Chart.js