score:0
you can match it to a second x axis that you hide:
v3 example:
var ctx = document.getelementbyid("canvas");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ['mon', 'tue', 'wen', 'thu', 'fri', 'sat', 'sun'],
datasets: [{
type: 'line',
label: 'a',
data: [60, 80, 90, 80, 80, 60, 50],
backgroundcolor: 'rgba(255, 0, 0, 1)',
bordercolor: 'rgba(255, 0, 0, 1)',
radius: 0,
xaxisid: 'secondx'
}, {
type: 'bar',
label: 'b',
yaxisid: 'yb',
data: [5, 2, 1, 3, 4, 5, 6],
backgroundcolor: [
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)'
]
}]
},
options: {
scales: {
x: {},
secondx: {
axis: 'x',
offset: false,
display: false
},
y: {
type: 'linear',
position: 'left',
ticks: {
max: 100,
min: 0
}
},
yb: {
position: 'right',
ticks: {
max: 10,
min: 0
}
}
}
}
});
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
v2 example:
var ctx = document.getelementbyid("canvas");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: ['mon', 'tue', 'wen', 'thu', 'fri', 'sat', 'sun'],
datasets: [{
type: 'line',
label: 'a',
yaxisid: 'a',
fill: false,
data: [60, 80, 90, 80, 80, 60, 50],
backgroundcolor: 'rgba(255, 0, 0, 1)',
bordercolor: 'rgba(255, 0, 0, 1)',
radius: 0,
xaxisid: 'second'
}, {
type: 'bar',
label: 'b',
yaxisid: 'b',
data: [5, 2, 1, 3, 4, 5, 6],
backgroundcolor: [
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)',
'rgba(0, 0, 255, 0.5)'
]
}]
},
options: {
scales: {
xaxes: [{}, {
id: 'second',
display: false
}],
yaxes: [{
id: 'a',
type: 'linear',
position: 'left',
ticks: {
max: 100,
min: 0
}
}, {
id: 'b',
position: 'right',
ticks: {
max: 10,
min: 0
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.js"></script>
<canvas id="canvas"></canvas>
Source: stackoverflow.com
Related Query
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to remove the extra Y axis from a bar chart in chart.js
- How to start Y Axis Line at 0 from right for negative values in chart js 2?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- how to draw line graph with line animation from left to right using chartjs?
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- ChartJS line chart or bar graph from a Java program
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How to Add X axis Padding in chart js Line Graph
- How do I stop chart js from auto rescaling the y axis upon calling chart.update()?
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- how to label the x and y axis - in a line graph
- 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
- Chart.js Bar Chart - how to chart bars from 0
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- line graph spot in the top middle of the bar graph
- ChartJs bar chart - keep bars left instead of equally spread across the width
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to align Chart.JS line chart labels to the center
- How to show Y axis ticks for every point in the graph
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
More Query from same tag
- React - render Chart.js chart based on user selection, after Ajax returns JSON
- how to use chart.js in angular 7
- Chartjs 2 scaling lots of data points
- why does my chart.js barograph order by whole numbers and then floats?
- JsChart multiple labels in legend
- Proper way to use a counter variable in HTML/Javascript
- Multiple Charts of the Same Type in ChartJS2 ReactJS - Buggy Tooltips
- ChartJS - Customize Ticks/Labels on Y Axis
- How to use chart.js to plot line chart with x axis as time stamp in seconds
- Charts in wicket
- c# Chart.Js and JSON with NewtonSoft
- passing json data to chartjs
- dynamically update the scale type of chartjs graph
- CharJs scrolling page on mobile
- How to make ng2-Chart Scrollable for large amount of data sets?
- is it possible to sum up the properties of an array of objects and to filter it according to another property?
- How to add a custom event on legend click
- Change dot size individually Scatter Chart -- ChartJS
- ChartJS: Get individual values minus another value in the custom legend
- chart.js npm module not working
- How to add text at end of each line in charts.js
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Change value from 0 to something on tooltip only
- chartjs dataset attribute hidden from function
- How to pass values to a chart (chart.js / morris.js)
- How can I set the yAxis scale for the chart?
- Chart.js Polar Area Chart is not scale right
- Chart.js - How to display all bars as different datasets(same behaviour as doughnut)
- How to align elements using a ChartBar from Chart.js and Alerts from Bootstrap 4?
- My chart is not shown on browser screen using chart.js in meteor