score:1
you can make use of the drawticks
and count
propertys to achieve what your want.
live example:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
y: {
ticks: {
count: 5,
padding: 10
},
grid: {
drawticks: false
}
},
x: {
ticks: {
padding: 10
},
grid: {
drawticks: false
}
}
}
}
}
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.4.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chart.js 3.4/Vue3 How to hide border ticks and set specific amount of grid lines
- chart.js: hide specific ticks in y-axis and hide all x-axis grid line
- How to hide grid lines and x-axis labels in chart.js?
- How to remove all gridlines and ticks all lines in lines chart in javascript taken from cdn)
- How to remove Grid lines except for zero line and border Chartjs?
- how to only show zero grid axes at center and hide all other gridlines in chart js
- Chart.js bar chart : Grid color and hide label
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- how to set chart.js grid color for line chart
- How can I display a set amount of ticks on the Y Axis?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How do you set x and y axis and Title for a line chart using charts.js?
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
- How Can customize chartjs doughnut chart border and tooltip
- how to change the label color and set y-axis values 1k intervals and hide y-axis?
- Chart.js 3.6.2, Angular 10: Logarithmic Line chart Y-Axis problems. How to set and keep Y-Axis properties, even when data changes?
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- How to configure chart.js line chart with very low minimum height, and only 0 and 1 (no decimals) as ticks on the y-axis
- How to set max and min value for Y axis
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can I make two of my lines in Chart JS thicker
More Query from same tag
- ChartJS not work in .php loaded by jquery .load() (AJAX)
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- PrimeNG/Chart.js - max Number of labels to show
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Chart JS - Disable lines and Uncheck legends by default
- set y-axis scale manually in a bar chart using angular-chart.js
- Access data arrays from c# method inside JavaScript inside .cshtml file
- Refresh chart.config.data
- Add Padding Right to Extended Line Chart in Chart.js V2
- Getting the HTML code of a chart created by chart.js
- chart.js: issue with concatening two line charts
- Change the graph from 1 Day to 15 mins when it is being loaded for the 1st time in ChartIQ
- Limit labels number on Chart.js line chart
- How to change chartjs ticks orientation to 'slope right'?
- why tooltip appears wrong in my chart JS?
- Y scaling relative to the max value in my ChartJS chart
- I need help on Optimization of Laravel Controller
- ChartJS horizontal bar with numbers on both scales
- Chart.js variable data how can i make this work?
- No tooltips on Chart JS line graph
- How to shrink the height and increase the line width of a custom Chartjs horizontal line?
- Stacked bar chart starting from 0 - ChartJS React
- How to only have a Y axes representing data in chart.js
- How to make the background color of the chart as gradient using Chart.js
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- Extract data from an array of Object
- How can I add multiple datasets into my dropdown menu and keep it as dynamic as it is right now?
- chart js graph legend colors
- Chart.js - Increase spacing between legend and chart
- ChartJS: Remove padding on first and last bars on Barchart