score:3
Accepted answer
yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null
values in the start of your data array:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
bordercolor: 'pink'
},
{
label: '# of points',
data: [{
x: 3,
y: 6
}, {
x: 4,
y: 8
}, {
x: 5,
y: 2
}, {
x: 6,
y: 12
}],
bordercolor: 'orange'
},
{
label: '# of points2',
data: [null, null, null, 9, 13, 15],
bordercolor: 'lightblue'
}
]
},
options: {
scales: {
yaxes: [{
ticks: {
reverse: 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.5.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Chart.js Line Graph: Start a line in the middle of a graph
- line graph spot in the top middle of the bar graph
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Canvas line chart on this graph stretch beyond the assigned lengths
- chartjs line graph destroy function is not clearing the old chart instances
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- Chart.js line chart is cut off at the top?
- How to align Chart.JS line chart labels to the center
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- ChartJS Line chart cut off at the top and bottom
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- Rotate 90 degrees clockwise the scaleLabel (no ticks or labels) on a Chart.js line chart
- Chart.js - Color specific parts of the background in a line chart
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Chart Js update legend boxes of graph with graph line style
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- 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?
- Chart.js - how to add a second data line to the line graph
- Chart.js -> line chart -> multiple points with the same X
- How to change the chart line or area colors according to the user need?
- Display Bar chart values in the graph - ChartJS
- 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?
- increase the label size of a line chart in chart.js
More Query from same tag
- A chart Js error issue are occured in my Laravel other page?
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- How implement Chart.js in Angular 2?
- Adding condition in ComponentDidMount to display chart data
- gap between half doughnut chart and container div
- Chart.js v3: How can I grow fontsize of legend of my graph?
- How to See Only the Image of Chart
- Array .map() returning undefined
- Chart.js Polar Area Chart is not scale right
- How to display pie slice data and tooltip together using chart.js
- Angular, Chart.js animation inside mat-tab
- Multiples values in yAxes with same xAxes
- Execute 'onscroll' function only once
- ChartJS display tooltip at maximum/minimum value
- Pause horizontal scrolling in chart.js for real time data
- Chartjs won't render chart with Requirejs
- Draw a mathematical function in chartjs
- How to implement scattered chart using chart.js which is not available by default?
- Chart.js 2.1.6: Drawing horizontal Limit Lines?
- Show point values in Radar Chart using chart.js
- Use Ternary Option with Chart.js and AngularJs
- Add data dynamically to chart
- Why Chart.JS showing an extra line
- Chart Js function (Chart.js) is stuck in a loop
- Add chart using chart.js in codeigniter
- Trying to export chart with Chartjs and React but getting erorr
- Charts.js - Bubble chart with two word axis
- Angular : how to display a modal-dialog (chart) in ng-template
- Chart.js only appears randomly, and disappears on page refresh
- How to set Solid label in bar chart using Chart JS