score:2
Accepted answer
you can define a second y-axis responsible for drawing the solid grid lines only.
y2: {
max: 100,
min: 0,
ticks: {
display: false,
stepsize: 25
},
grid: {
drawticks: false,
drawborder: false,
color: 'rgba(255, 255, 255, 0.2)'
}
}
also add y.gird.linewidth
as follows in order to omit the dashed lines where a solid line should appear.
linewidth: ctx => ctx.index % 5 ? 1 : 0
please take a look at your amended code and see how it works.
new chart('chart', {
type: 'bar',
data: {
labels: ['red', 'blue', 'yellow', 'green', 'purple', 'orange', 'green', 'purple', 'orange'],
datasets: [{
label: '',
barpercentage : 0.05,
data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
backgroundcolor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
bordercolor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
borderwidth: 0.1
},{
type : 'bubble',
data : [
{
x : 20,
y : 80,
r : 50
},
{
x : 40,
y : 19,
r : 20
},
{
x : 60,
y : 3,
r : 1
},
{
x : 80,
y : 5,
r : 20
},
{
x : 100,
y : 2,
r : 5
},
{
x : 120,
y : 3,
r : 5
},
{
x : 140,
y : 30,
r : 20
},
{
x : 140,
y : 20,
r : 20
},
{
x : 140,
y : 30,
r : 50
}
],
backgroundcolor: 'rgba(148, 181, 115, 0.7)',
bordercolor : 'rgba(228, 248, 188, 0.92)'
}]
},
options: {
responsive : true,
plugins : {
legend : {
display : false
},
chartareaborder: {
bordercolor: 'rgba(255, 255, 255, 0.2)',
borderwidth: 2,
}
},
scales: {
x : {
display : false,
max : 100,
min : 0,
ticks : {
stepstze : 10,
callback : () => ('')
},
grid : {
drawticks : false,
//color : 'rgba(255, 255, 255, 0.2)',
borderwidth : 2
}
},
y : {
max : 100,
min : 0,
ticks : {
display: false,
stepsize : 5
},
grid : {
drawticks: false,
drawborder : true,
borderwidth : 2,
borderdash : [5,5],
borderdashoffset : 2,
color : 'rgba(255, 255, 255, 0.2)',
linewidth: ctx => ctx.index % 5 ? 1 : 0
}
},
y2 : {
max : 100,
min : 0,
ticks : {
display: false,
stepsize : 25
},
grid : {
drawticks: false,
drawborder : false,
color : 'rgba(255, 255, 255, 0.2)'
}
}
},
interaction : {
mode : 'index'
},
}
});
body {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- How do I change the grid line style on the Y axis in Chart.js?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to change the chart line or area colors according to the user need?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- In chart.js how can I change the x axis on my line \chart from January-December to October-September? Basically, fiscal year instead of calendar year
- How to align Chart.JS line chart labels to the center
- In ChartJS is it possible to change the line style between different points?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to change cursor style to pointer on hovering over points of the chart?
- how to set chart.js grid color for line chart
- How to change grid line width for one specific line
- Chart Js, Style some ticks on the axis differently
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How do I change the colour of a Chart.js line when drawn above/below an arbitary value?
- Change Axis Line color in Chart created using chart.js
- How to change the fontFamily of the labels and remove the grid in chart.js
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- chart.js: How do I make the radar chart axis labels bigger?
- How to change background color of labels in line chart from chart.js?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- Chart.js - how to make proportional intervals on X axis on line chart
- How to change color by clicking on the chart bar?
- Chartjs - how to change the notation of doughnut chart
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How do you make a progressive line chart with time as the X axis?
More Query from same tag
- Chart.js - How to remove percentage data labels?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How can I add functionality to Chartjs Doughnut chart custom legend
- Chart.js: Don't stretch axes beyond chart
- How to achieve the best possible performance with mutable data and real-time charts in React?
- Chart.js label on bar
- Can you remove the xAxes border line and keep the ticks only?
- How to align ChartJS bars to the left?
- Chart.js bumpy line
- Get data from SQLite as an array and generate charts with the data using Chart.js in an HTML
- Chart.js not updating multiple charts independently
- Chart.js Stacked Group Bar model after updating version Chart.js 2.9.4 -> Chart.js 3.5.0
- Why chart.js charts are not plotting data in Safari (works in Chrome)
- Add a label to a point of a bubble graph (Chart.js)
- ChartJS line chart or bar graph from a Java program
- ChartJS - Custom tooltip with icon
- How can I set the scale with alphabet on chartjs?
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- After form submit, function runs quickly and chart.js shows up for a second then goes away
- How can I place single data on the center in Chart.js?
- Changing tooltip color in Chart.js
- Charts.js how to fix the height with more than 50 horizontal bars
- Angular-Chart.js - Tooltip not working with 0 values
- ChartJS: Is it possible to omit last grid line to save space
- Difference between DXTREME and PhoneGap
- Invalid Date moment.js using Iso yyyy-MM-dd HH:mm:ss
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- Chart.js Multiple charts with one common legend
- Chartjs multiple barcharts , the first data will offset over view
- Pass context to options on React ChartJS 2