score:4
Accepted answer
the property you are looking for is called display
instead of drawborder
, also your xaxes
are defined in the wrong way, you were using v2 syntax instead of v3
example:
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
display: false,
}
},
y: {
grid: {
display: false
}
},
}
}
});
.mychartdiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>
score:1
i had the same problem and i solved it by setting the color of the gridlines to white like so:
scales: {
xaxes: [{
gridlines: {
color: '#ffffff'
}
}]
}
score:1
here is the solution.
looks like lot of configuration has changed in the new version.
reference from documentation here.
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
drawonchartarea:false
}
},
y: {
grid: {
drawonchartarea:false
}
}
}
}
});
.mychartdiv {
max-width: 600px;
max-height: 400px;
}
<html>
<body>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>
Source: stackoverflow.com
Related Query
- Remove the vertical line in the chart js line chart
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Remove the label and show only value in tooltips of a bar chart
- Chart.js Radar Chart How to Remove Outer Labels
- impossible to remove scale from radar chart (chart.js)
- Remove radar chart labels in chart.js
- Different gridline steps on chart js line chart
- Remove Angularjs-Chart border and reduce chart arc thickness
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to remove border from stacked column chart in Chartkick - Chart.js
- ChartJS: Remove padding to the right of chart caused by tick labels
- Chart.js remove gridline
- Remove padding from chartJs horizontal bar chart
- Remove additional white space on left and right side of Angular Chart
- Chart.js - Remove empty space in pie chart
- Chart JS remove x-axis and y a-xis visibility
- How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart
- How to Remove axis Lines from chart in chart js
- How do I remove cartesian axes from chart js?
- PrimeFaces PolarArea Chart - GridLine Color Change
- Remove background color in chartjs line chart
- Remove 0% from pie chart
- How to remove or color line/grid in polar chart area using Chart.js?
- Remove label from line chart - react-chartjs-2
- Chart.js how to remove final label on chart
- chart.js remove lower grid from mixed chart
- How do I remove the ticks or inner circles of my polar area chart Chart.js
- Chart.js remove zero value sector in pie chart
- Remove custom Chart Js tool tip colour square
More Query from same tag
- React Chartjs - Update Chart on interval
- Customizing Chart.js troubleshoot
- Vue.js Vue-chart.js linear gradient background fill
- Chartjs box plot with Y-axis negative values
- Chart.js - cannot read property
- chart.js My DATA doesn't go along with the label,
- How to expand the slice of donut chart in chartjs?
- How to set Chart.js axis minumum to 0?
- Configuring a Radar Chart w/Chart.js
- chart.js label color change based on value
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Chart.js 2 - Always display only some tooltips in bubble chart
- ChartJS showing wrong dataset following visibility property toggle
- ChartJS: Adjust Tooltip with sums in body
- Chart.js Types of property 'type' are incompatible. Type 'string' is not assignable to type '"line" | "bar" | "scatter"
- Setting specific color per label in chart.js
- Stacked areachart with percents values on the y axis using Charts.js and Angular 8
- Is it possible to change chartjs line value in one column ? No transition
- Chart.js - disable tooltip when cursor moves outside the main canvas
- How to add padding between Graph and X/Y-Scale in chart.js?
- Is it possible to revert x-axe values in line chart with chart.js
- Chart.js Example Diagramm don't show
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Different labels needed for second line graph, chart js
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- Horizontal bar with two yaxes chart js
- cant resize range of Y axis of chart in HTML/PHP
- Show multiple charts at HTML page?
- How to make chartJs stacked bar always rounded when data is 0?
- Angular 2 ng2-charts donut change segment color