score:0
you can use a custom plugin for this:
const customline = {
id: 'customline',
beforedatasetsdraw: (chart, args, options) => {
const {
ctx,
scales: {
x,
y
}
} = chart;
chart.data.datasets[0].data.foreach((datapoint, i) => {
ctx.strokestyle = options.linecolor || 'black';
ctx.linewidth = options.linewidth || 1;
ctx.beginpath();
ctx.moveto(x.getpixelforvalue(chart.data.labels[i]), y.getpixelforvalue(datapoint));
ctx.lineto(x.getpixelforvalue(chart.data.labels[i]), y.getpixelforvalue(chart.data.datasets[1].data[i]));
ctx.stroke();
})
}
}
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1,
showline: false,
backgroundcolor: 'red'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
borderwidth: 1,
showline: false,
backgroundcolor: 'blue'
}
]
},
options: {
plugins: {
customline: {
linecolor: 'pink',
linewidth: 3
}
}
},
plugins: [customline]
}
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.3.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chartjs - Line between two dots on the Y axis
- How do I use ChartJS with a background color in the space between two line charts?
- Chartjs Line Color Between Two Points
- In ChartJS is it possible to change the line style between different points?
- My data array has null values in chart.js. Is there a way to draw a line between the two segments to maintain visual progress?
- When using chart.js to draw a line chart, if the peak is between two x values instead of "at a x value"
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Chartjs change the specific label color in x axis in callback function
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chartjs 2.7.3: Set Y data at the correct X position axis
- chartjs - Drawing vertical line on integer x axis value
- Map event position to y axis value in chartjs line chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Changing the Y axis unit in Chartjs
- Find intersection between the chart lines in chartjs
- ChartJS Line chart cut off at the top and bottom
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Line ChartJS empty / null values doesn't break the line
- How to add background color between two lines in yAxis Chartjs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Specific grid line in X axis in ChartJs
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chart.js drawing line between two points
- How to add background color between two specific lines in Chartjs 3.1
- How to draw multiple line on y axis for same x axis in chartjs v2?
- ChartJS align axis label to the top
- ChartJS getting an unwanted line between first data point and last data point
More Query from same tag
- Vue.js chart not working?
- Chart.js How to set line height only to the points?
- Changing the base of the logarithmic scale in Chart.js
- Chart.js: Disable Y-Axis, when graph is disabled via Legend
- ChartJS incorrect plot when plotting multiple line charts in one graph
- Why does x axis not increment 'monthly' chart.js. Also, XAxis not taking title
- Chart.js: get chart data from canvas
- Refresh chart.config.data
- How can we build charts on Polymer 1.0 using Chart.js?
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- Chart.js - Vertical crosshair (vertical annotation that moves with mouse) in line graph
- The chart list is not showing
- Best API/code library to build a timeline/chart
- How to call a function when an element is loaded in Angular?
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- How to display large amount of information properly without cramping too much in Chart.js
- Rails and Chart.js
- Bar chart does not appear with Chart.js
- Angular-chart.js click on bar and change it's background color
- Add HTML to label of bar chart - chart js
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- How to hide labels by two ticks? chartjs
- ChartJs: Different color fill between points makes lines straight...need curves (lineTension)
- Where are the default colors for charts in Chart.js defined?
- How to make Chart.js with dynamic months on x-axis
- Edit legend labels [vue-chart.js]
- Pass List of Objects as data
- How to make chartJs stacked bar always rounded when data is 0?
- Data with pair X and Y values