score:1
Accepted answer
you can add a second x-axis of type: 'linear'
as follows.
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepsize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
note that i use a ticks callback method in order to provide the desired tick label at given index.
then you should also hide the grid lines and ticks of the default x-axis.
{
gridlines: {
display: false
},
ticks: {
display: false
}
}
please take a look at below runnable sample code and see how it works.
const labels = ['4.80', '9.60', '14.40', '19.20', '24.00', '28.80'];
new chart(document.getelementbyid('mychart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "my dataset",
data: [4, 8, 5, 7, 2, 4],
backgroundcolor: 'orange',
categorypercentage: 1,
barpercentage: 1
}]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}],
xaxes: [{
gridlines: {
display: false
},
ticks: {
display: false
}
},
{
type: 'linear',
ticks: {
min: 0,
max: labels.length,
stepsize: 1,
callback: (v, i) => i == 0 ? '' : labels[i - 1]
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
<canvas id="mychart" height="90"></canvas>
score:-2
you can use this to put the tooltips to the right. possibilities are top, left, right and bottom
options: {
title: {
display: true,
position: 'right'
}
}
Source: stackoverflow.com
Related Query
- Chart.js move x axis labels to the right
- 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
- ChartJS: Remove padding to the right of chart caused by tick labels
- chart.js: How do I make the radar chart axis labels bigger?
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Making the labels responsive in chart js
- Using Chart.js - The X axis labels are not all showing
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Changing x axis labels in Chart.js line chart
- Line chart with large number of labels on X axis
- How to align Chart.JS line chart labels to the center
- 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?
- ChartJS: Show all labels of a mixed chart in the tooltip
- Chart Js, Style some ticks on the axis differently
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- Modify the labels in chart.js when I update the chart
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Pie chart isn't loading, but the labels are
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- how to minimize x axis labels to day hours in chart js
- Labels (category type) on left and right of bar chart using chart.js?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- Tilting the labels of the x axis to some degrees in chart.js
- Chartjs React Typescript moving x axis labels above chart
- Legend isnt moving to the right on my doughnut chart created with chart.js
More Query from same tag
- wrong rendered bar chart Chart.js
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
- Changing labels with logo images
- Chart.js two categorical scales
- turn off point values in radar chart
- Printing Chart using ngPrint and tc-chartjs
- How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs
- ChartJS ReactJS Object of Objects
- Apply/Register conflicting plugins to different charts
- chartjs with local dates
- Why are more columns on one labels in Angular ChartJS?
- Chart.js Line Chart x-Axes label rounding
- Chart.js data/label scale
- ChartJS - Override Attributes (AngularJS)
- Changing color of specific ChartJS - AngularChartJS point
- Starting a Chart.js Time Scale at 0
- Chart.js display x axis labels ON ticks in bar chart, not between
- Remove padding from chartJs horizontal bar chart
- Different major tick format in Chart.js
- I cannot update my chart ( in react-chartjs-2 )
- How to show labels of dataset using chart.js
- Chart.js Text color
- chart.js - Axis lables
- Loop Dataset ChartJS Javascript
- Filling area between two lines - Chart.js v2
- Bars on chartjs superimpose when using type: 'time'
- How to unregister a chart plugin?
- Chartjs: Bar width
- How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?