score:38
Accepted answer
You can create a scatter chart instead of line.
Here is an example :
( tried to replicate your given image amap )
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{
x: 1,
y: 1
}, {
x: 3,
y: 7
}, {
x: 6,
y: 5
}, { // add same data as the first one, to draw the closing line
x: 1,
y: 1
}],
borderColor: 'black',
borderWidth: 1,
pointBackgroundColor: ['#000', '#00bcd6', '#d300d6'],
pointBorderColor: ['#000', '#00bcd6', '#d300d6'],
pointRadius: 5,
pointHoverRadius: 5,
fill: false,
tension: 0,
showLine: true
}, {
data: [{
x: 3.5,
y: 4.5
}],
pointBackgroundColor: 'orange',
pointBorderColor: 'darkorange',
pointRadius: 10,
pointHoverRadius: 10
}]
},
options: {
legend: false,
tooltips: false,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}],
yAxes: [{
ticks: {
min: 0,
max: 8,
padding: 10
},
gridLines: {
color: '#888',
drawOnChartArea: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
note : this is just an example, and you can customize it further to fit your need, following the official documentation.
Source: stackoverflow.com
Related Query
- Display line chart with connected dots using chartJS
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How to display chart using Chartjs with JSON data in Laravel
- Real-time line chart with ChartJS using Ajax data
- Draw stacked horizontal bar chart with Average line using ChartJS
- Chartjs - line chart display with addData() is bugged?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to display Line Chart dataset point labels with Chart.js?
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- ChartJS - Line Chart with different size datasets
- ChartJS - Line chart issue with only 1 point
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Gradient line chart with ChartJS
- Adding line over stacked line chart with ChartJS
- display vertical axis label in line chart using chart.js
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to get Data from API to display chart using chartjs in Vuejs
- Line Chart using Chart js with time data
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Vertical Line chart with ChartJS
- How do I display two datasets on a single chart with chartjs
- Plot Multiple Line Chart in Ionic 3 with ChartJS
- drawing line chart with chartjs
- Using Chart.js 2.0, display line chart values
- Remove redundant legends on the chart using generateLabels with ChartJS v3
- chartjs display data in one bar line with 3 different data sets in 3 different colors
- Can chart.js display text associated with each point on a line chart that is permanently visible?
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
More Query from same tag
- How to check chart type on Chart.js
- Angular Chart.js Multiple Canvas
- How to remove grid on chart.js
- How can i do this chart in react?
- ChartJS date formating
- How to configure Chartjs Bar Stacked Chart in Laravel 8
- Merge 2 charts into 1 chart using update button (chart.js)
- Making angular-chartjs responsive with UI-Grid
- Chart.js will not render using vue.js until window resizes
- How do I horizontally center a line chart when their is a single X-Axis value?
- How to create a pannable real-time chart
- Array is not being updated in useState hook?
- Chart js: how can I align the legend and the title
- Chart.js labels of x-axes makes useless space in chartarea
- Bar color in ChartJS not updating
- increase the label size of a line chart in chart.js
- Charts Js Stacked Bar Graph displays no values?
- Cannot resize chart from chart.js
- Chart.js I want to fix my xAxis to my yAxis position 0
- Chart.js load new data from saved JSON object
- How to check if HTML5 canvas element contains something in given coordinate region using javascript
- Chart.js legend alignment
- How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
- Cannot create Chart using Chart.JS @ 2.9.4
- Chartjs doesn't update dataset label on tooltips
- How to fix ERROR in node_modules/chart.js/types/animation.d.ts(20,37): error TS1005: ',' expected. in chart.js
- How to execute a JavaScript function with ChartJS and FreeMarker?
- Chart.js Line chart fixed tooltip
- ChartJs - Double tooltip Top and Bottom on hover
- chartnew.js - remove lines from pie chart on 100%