score:2
Accepted answer
You could extend the Bar Chart to add the horizontal line
Chart.types.Bar.extend({
name: "BarLine",
draw: function () {
Chart.types.Bar.prototype.draw.apply(this, arguments);
var scale = this.scale,
barHeight = this.scale.calculateY(83);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(30, barHeight);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineWidth = 3;
this.chart.ctx.lineTo(this.chart.width, barHeight);
this.chart.ctx.stroke();
// write Label Text
this.chart.ctx.fillStyle = '#000000';
var text = this.options.labelText ? this.options.labelText : "DEFAULT TEXT"
this.chart.ctx.textAlign = 'center';
this.chart.ctx.font = '22px Arial';
this.chart.ctx.fillText(text, this.chart.width * 0.5, 95);
this.chart.ctx.closePath();
}
});`
You could add the bar values in the draw function i'm sure, but I generally do it in the 'onanimationcomplete' function for the chart, like so:
resultChart = new Chart(resultGraphCanvas.getContext("2d")).BarLine(chart, {
scaleBeginAtZero: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
maintainAspectRatio: false,
labelText: "TEST DRAWN NEAR THE LINE",
showTooltips: false, //Needs to be set to false for the onAnimationComplete drawing to persist
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y );
});
})
},
});
This will draw the values at the top of the bars, i'll leave positioning them elsewhere to you :)
Source: stackoverflow.com
Related Query
- ChartJS: how to make a bar chart with a horizontal guideline:
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to draw Horizontal line on Bar Chart Chartjs
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How to make a chart with chartjs and Angular?
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- How to order a horizontal bar chart - chartJS & Chart.HorizontalBar.js
- Draw stacked horizontal bar chart with Average line using ChartJS
- How to make labels on both side from horizontal bar chart js
- How to make multiple horizontal bar chartjs
- Can I make a horizontal bar chart with two category axes?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Horizontal stacked bar chart with chart.js
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to display inline values in a stacked bar chart with Chart.js?
- ChartJS bar chart with legend which corresponds to each bar
- Chartjs - data format for bar chart with multi-level x-axes
- Horizontal bar with multiple sections in ChartJs
- how to make a chart.js bar chart scrollable
- Stacked horizontal bar chart along total count with chart.js
- How do I make line charts overlay over bar charts in chartjs
- How to make bar chart animation where all bars grow at the same speed?
- How to make customized stepSize for each horizontal bar in Chart.js graph
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- How to change Chart.js horizontal bar chart Width?
- How to remove bars for those bars with zero value in Chartjs bar chart?
More Query from same tag
- Chart js - Get bar width after render
- ChartJS with Symfony 4.4 (UX component)
- Refresh chart.config.data
- Inverting X axis number labels in chart.js scatter chart
- Floating clone does not show in chrome if dragged element contains a chartjs component
- Trying to create chartjs constructor
- Adjust font-weight in Chart.js doughnut chart
- TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs
- Chart.js with 2 y-axis
- Switching between Charts with chart.js using Buttons
- How to show tooltip value of all data falling on the same axis in chart js?
- ChartJs Bubble chart - on hover bubble becomes too big
- Connecting points between missing data in chart.js
- Click on Element Inside Doughnut Chart
- Problems with chart.js using Laravel 7, Cannot find element: #app?
- How to get dynamic popover element after inserted to DOM?
- ChartJS - Show/hide data individually instead of entire dataset on bar/line charts
- chart.js control space between/size of gridlines
- Adding new data to empty Chart.js chart does not render new data correctly
- ChartJS: Bar chart with axis ticks wider than categories
- How to increase right spacing in Chart.js 2.6.0?
- Add different labels in a line chart - Chart.js
- Small value in doughnut chart is not visible - Chartjs
- Javascript not populate chart after retrieve json data
- Y-Axis with different colors
- Chart.js multiple series with same scale
- Chart.js number Y-AXIS label format for many decimal places
- Is it possible to dynamically add more Y Axes or more X Axes on chart js?
- Chartjs - Stacked bar chart data order causes invisible other values
- Chart.js number format