score:2
Accepted answer
you can use the object notation to achieve this by telling to which x label chart.js has to link the value so you can skip some labels.
example:
var options = {
type: 'line',
data: {
labels: [2019, 2020, 2021, 2022],
datasets: [{
label: '# of votes',
data: [{
x: 2019,
y: 100
}, {
x: 2021,
y: 200
}, {
x: 2022,
y: 100
}],
bordercolor: 'pink',
backgroundcolor: 'red',
radius: 5
}]
},
options: {
}
}
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.5.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chart.js: A value is empty, but the line must not be broken
- 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 with line chart and bar chart - bar chart not rendered although the max value of it is shown
- show label in tooltip but not in x axis for chartjs line chart
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Chart.js line chart not showing point on top most value
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Chart.js line chart looking as area chart with smooth lines but not sharp
- chart does not change the values when the variable changes the value
- I have a chart but it is not updating the chart with react chart-js-2
- chartjs line graph destroy function is not clearing the old chart instances
- Trying to call API and plot a line chart but it does not show
- Position of the x-axis labels is not in sync with the line chart data points
- How to add new Line but not in the first x axes
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- Chart.js line chart is cut off at the top?
- How to display value of only one datapoint in line chart
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Obtain max value of y axis of line chart rendered with Chart.js
- Angular-chart.js - Make line chart does not curve
- How to align Chart.JS line chart labels to the center
- angular-chartjs line chart TypeError: t.merge is not a function
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Why can I not see a data value when hovering over a point on the radar chart?
- Chart.js line chart is not displaying
- Remove the label and show only value in tooltips of a bar chart
- Map event position to y axis value in chartjs line chart
- Line chart is not being displayed in Chart.js
More Query from same tag
- after div display set to block nothing shows
- create Chart using Chartjs and PHP
- Chart.js v2 formatting time labels
- ChartJS scale ticks with scatter plot
- Passing Data from Controller to ChartJS
- Chart.js doughnut text colors
- How to change position of labels in Doughnut chart?
- How to set 2 y-axis title (and/or label) on chartjs?
- django + chart.js : Cannot get two bar charts on the same graph with appropriate data
- Why is this bar chart using chart.js not rendering in react.js?
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- angular 5 chart.js Failed to create chart
- How to create stacked bar chart using react-chartjs-2?
- I want to multiply chart data according as array length
- How to replace data value(js) with a datatable value?
- Chartjs tooltips disappear when calling Chart.update
- Change point style in Chartjs via external event
- Call to undefined method App\Charts\SampleChart::labels(), chartjs
- Split JSON into two arrays gives undefined keys-values
- How to add an image to a slice of a donut chart in chart.js?
- Annotation problem with ng2-charts in Angular 11
- How can I make my charts dynamic every time I choose an item from my dropdown?
- Timeline on Y axis, with chart.js
- Is there a way to make a view run without having to show the view in the browser in laravel?
- Chart.js mixed chart : Lines not starting at zero
- ChartJS, updating chart type does not update xAxis properly
- ChartJS place y-axis labels between ticks
- what is `dart.js` in chartjs.dart example
- y=0 gridline (or axis?) not showing in chart.js
- How to center radar chart ticks when changing start angle of chart?