score:2
Accepted answer
this can be achieved via a custom plugin making direct draw calls to the canvas, an example of which i've included below. note that the code makes a lot of assumptions based on your screenshot and should be considered as a starting point rather than a perfect drop-in solution.
let mychart = new chart(document.getelementbyid('chart'), {
type: 'line',
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
datasets: [{
label: 'group1',
data: [-1000, -2000, -2000, -3000, -4000, -3000, -5000],
backgroundcolor: '#f48496'
}, {
label: 'group2',
data: [-4000, -4000, -3000, -6000, -6000, -5000, -9000],
backgroundcolor: '#61b2e9'
}]
},
options: {
maintainaspectratio: false,
layout: {
padding: {
right: 100
}
},
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
},
plugins: {
afterrender: function(c) {
let
// calculate difference between values of last two points in first and second datasets.
d = c.config.data.datasets[0].data[c.config.data.datasets[0].data.length - 1] - c.config.data.datasets[1].data[c.config.data.datasets[1].data.length - 1],
// position of last point in first dataset.
xy0 = c.getdatasetmeta(0).data[c.getdatasetmeta(0).data.length - 1]._model,
// position of last point in second dataset.
xy1 = c.getdatasetmeta(1).data[c.getdatasetmeta(1).data.length - 1]._model;
c.ctx.save();
// draw the line.
c.ctx.strokestyle = 'black';
c.ctx.beginpath();
c.ctx.moveto(xy0.x + 10, xy0.y);
c.ctx.lineto(xy0.x + 15, xy0.y); // draw the upper horizontal line.
c.ctx.lineto(xy0.x + 15, xy1.y); // draw the vertical line.
c.ctx.lineto(xy1.x + 10, xy1.y); // draw the lower horizontal line.
c.ctx.stroke();
// draw the text.
c.ctx.font = '20px sans-serif';
c.ctx.fillstyle = 'black';
c.ctx.filltext(
d, // text
c.chartarea.right + 25, // text x position
xy0.y + ((xy1.y - xy0.y) / 2) // text y position
);
c.ctx.restore();
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- Range at the end of the line chart
- 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?
- Chart.js line chart with area range
- ChartJS Line chart cut off at the top and bottom
- Rotate 90 degrees clockwise the scaleLabel (no ticks or labels) on a Chart.js line chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Chart.js - Color specific parts of the background in a line chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- chart.js add second line in a Line chart that starts from end of first line
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Chart.js -> line chart -> multiple points with the same X
- How to change the chart line or area colors according to the user need?
- 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
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- Connect the dot vertically instead of horizontally on Line Chart
- How do you make a progressive line chart with time as the X axis?
- ChartJS, Primeng, Gap first and end of line chart
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- How to get rid of the line on top of every point on a line chart (Chart.js)
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
More Query from same tag
- Querying data from Firebase for Chart.js using AngularJS
- How to hide y axis line in ChartJs?
- Convert two lists into a dictionary of X and Y Format
- pie chart inside donut chart using chart js
- Chart.js: trouble with resizing on window resize
- Charts js and laravel: Render chart after passing in json data
- Dynamically update value for horizontal line in annotation plugin for Chart.js in Angular 5
- Determining which chart the user has clicked on
- How can I make line on chart thinner?
- ChartJs Bubble chart - on hover bubble becomes too big
- Datalabels plugin throws error when using scriptable option
- Can i use destroy charts in React.js using Chart.js?
- ChartJS Version 3 - common legend for multiple line charts
- How to rename properties in objects that are in an array. What is the right way to solve the task?
- Chartjs bar chart appears empty when page loads
- JavaScript array value to chart.js graph as stacked graph
- In Chart.js multibar graph, is there a way to highlight a single category?
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- Chart.js multiple datasets on one y axis
- How to hide axis using Chartkick.js
- Passing data to a chart javascript object and array
- Dynamically set chart type with Angular Chart?
- Laravel & chartjs blank canvas
- Generate Chart With 2 Datasets Charts.js
- System.ArgumentException: Column 'COLUMN_NAME' does not belong to table
- Angular PrimeNG p-chart chartsjs is not showing
- How can I add an event to chart.js legend?
- Need to put border on variablepie highchart?
- Retrieving daily & monthly totals from MySQL for use in a chart
- How to generate colors for unknown number of datasets in Chartjs