score:1
Accepted answer
you can write a custom plugin for this, i added padding on the right to give space for the arrow to be drawn. you can play with the multiplyer values to make the arrow bigger/smaller
example:
var randoms = [...array(11)].map(e => ~~(math.random() * 11));
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: randoms,
datasets: [{
label: 'value',
data: randoms,
bordercolor: 'red',
backgroundcolor: 'red'
}]
},
options: {
layout: {
padding: {
right: 25
}
},
scales: {
y: {
grace: 10
}
}
},
plugins: [{
id: 'arrow',
afterdraw: (chart, args, opts) => {
const {
ctx
} = chart;
chart._metasets.foreach((meta) => {
let point = meta.data[meta.data.length - 1];
ctx.save();
ctx.fillstyle = point.options.backgroundcolor;
ctx.moveto(point.x, (point.y - point.y * 0.035));
ctx.lineto(point.x, (point.y + point.y * 0.035));
ctx.lineto((point.x + point.x * 0.025), point.y)
ctx.fill();
ctx.restore();
})
}
}]
});
function populate() {
let temp = ~~(math.random() * 11);
mychart.data.datasets[0].data.shift();
mychart.data.datasets[0].data.push(temp);
mychart.update();
}
//setinterval(populate, 10000);
<script src="https://npmcdn.com/chart.js@latest/dist/chart.min.js"></script>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Is it possible to draw a bar and arrow/pointer on the right side of a chart?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Draw a horizontal bar chart from right to left
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Remove additional white space on left and right side of Angular Chart
- Labels (category type) on left and right of bar chart using chart.js?
- Draw points and lines inside a bar in bar chart
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- 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 show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- Vue-Charts label numbers to the side of a bar chart
- 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 can I put my label on the right hand side of my chart in Chartjs
- Chart JS: is possible mix Scatter and bar chart in Chart JS?
- Chart JS horizontal bar chart width of bars and the chart
- Draw vertical and horizonal lines on the radar chart (like x-y axes)
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- ChartJS Bar chart painting second bar to the right
- Chart.js: bar chart first bar and last bar not displaying in full
- 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?
- Chart.js bar chart : Grid color and hide label
More Query from same tag
- How do you create a Radar chart using chart.js with a y-axis of 0 to 100?
- Mulitple canvas-images (by Chart.js) with toDataURL()
- How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?
- Plot time on Y axis
- How to remove percentage calculation on top of bar in ng2-chart bar chart
- Why is ChartJS skipping an xAxis label in this snippet?
- How to display Json object in chart js consisting of lists created using Django rest framework in angular application
- Script error : "Uncaught SyntaxError: Unexpected identifier"
- Add a text as tooltip for each point on a line chart
- How to get tooltip on chart.js v1.x?
- Chart.js the value on the graph does not disappear when deselected
- How can I create a long tail chart with chart.js
- How to change chartjs ticks orientation to 'slope right'?
- Change line point to triangle in Chart.js
- Remove Canvas then add new Canvas in same spot
- Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
- how to transform changing data to be visualized in a chart.js
- downhole chart - recharts or chart.js or anything else?
- chart.js version 3 - How to make an overlapping bar chart?
- How can I hide point label in chart Js?
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Resizing chart issue with CSS Grid
- How to make chart which has both positive and negative value, starts with 0 - x axis
- Wrong display of xAxes in Chartjs
- Incorrect chart displayed using chart js
- How to update a chart taking by querying a database?
- beforeDraw in Chart JS 3.5.x
- Array is not being updated in useState hook?
- Chart.js Globally Formatted Number Labels
- Sql Server query that returns prices from each shop on each date and adds a 0 if no data is present for the shopId on a particular date