score:2
Accepted answer
you can define the layout
with negative left padding as follows:
options: {
layout: {
padding: {
left: -10
}
},
...
please have a look at the following code snippet where the chart canvas is defined with a border in order to emphasize the alignment with the preceding text.
var mychart = new chart(document.getelementbyid('mychart'), {
type: 'horizontalbar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'money in',
data: [5, 19],
backgroundcolor: ['rgb(0,51,160)', 'rgb(26,121,191)'],
borderwidth: 0
}]
},
options: {
layout: {
padding: {
left: -10
}
},
scales: {
yaxes: [{
ticks: {
fontcolor: 'white',
mirror: true,
beginatzero: true,
fontsize: 17,
padding: -9,
z: 1
},
gridlines: {
display: false
}
}],
xaxes: [{
gridlines: {
display: false
},
ticks: {
beginatzero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
canvas{
max-width: 300px;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.bundle.js"></script>
<p>text here</p>
<canvas id="mychart" width="400" height="150"></canvas>
Source: stackoverflow.com
Related Query
- Remove padding from chartJs horizontal bar chart
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Remove zeroline in chartJS Horizontal Bar chart
- How to draw Horizontal line on Bar Chart Chartjs
- Stacked bar chart starting from 0 - ChartJS React
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Draw a horizontal bar chart from right to left
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- ChartJS horizontal chart display legend on each bar
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- ChartJS 2.9.4 can't overlay line data on Horizontal Bar chart
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- Chartjs duration horizontal bar chart
- ChartJS line chart or bar graph from a Java program
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Remove 0's (zeros) from x-axis of bar chart in Chart.js
- ChartJs 2 How to remove numbers from the doughnut chart on loading
- How to remove a label in top of bar in chartjs chart
- How to remove the extra Y axis from a bar chart in chart.js
- how to insert dynamic data from sql into chartjs stacked bar chart javascript
- How to order a horizontal bar chart - chartJS & Chart.HorizontalBar.js
- Draw stacked horizontal bar chart with Average line using ChartJS
- How to make labels on both side from horizontal bar chart js
- ChartJS fails to render horizontal bar chart for timeseries data
- Chartjs force horizontal bar to start from the lowest value
- Chartjs bar chart trying to get labels from datasets
- Chartjs Bar Chart showing old data when hovering
- Chartjs v2.0: stacked bar chart
More Query from same tag
- ChartJS showing incorrect data on the X-Axes
- Chart.JS Time Axis Not Parsing
- ChartJS Version 3 - common legend for multiple line charts
- Chartjs: Double x axis not having the same gridline
- How to show Y axis ticks for every point in the graph
- How to set start value as “0” in Chart.js Laravel
- Hide Chart.js bubble points based on filtering
- ChartJS BoxWidth not working
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- How to make a Chart.js Bar chart stay in its place
- import Json formatted values to create bar charts with Chart.js
- Radarwidth beyond label chart.js
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Give '%' on Bar Chart Datalabel Chartjs
- lazy loaded modules share same dependencies?
- chart.js control space between/size of gridlines
- Chartjs change the specific label color in x axis in callback function
- chart js put meter square / superscript on y axis
- Chartjs disable legend click does not work when condition is not evaluated
- ChartNew.js - Remove/Hide zero label from Pie Chart
- Is there a way to adjust only the bottom padding of a chart's title in Chart.js?
- chart.js mix chart (bar + line): get lines to start at x = 0
- chart.js LIne Graphs: Fill area above line as opposed to below and to the right
- Chart.js modal window
- Adding multiple dataset and colors not being assigned in ng2-charts
- How to change React chartjs-2 legend click functionality to hide all except the one clicked?
- Is it possible to draw a bar and arrow/pointer on the right side of a chart?
- ChartJS line chart x = y not rendering astraight line
- laravel-chartjs not displaying anything
- Chart.js coming up as blank