score:2
Accepted answer
you will need a custom plugin for this, in there you can specify that you want it to draw before the datasets are being drawn. you can do that like so:
chart.register({
id: 'barshadow',
beforedatasetsdraw: (chart, args, opts) => {
const {
ctx,
tooltip,
chartarea: {
bottom
}
} = chart;
if (!tooltip || !tooltip._active[0]) {
return
}
const point = tooltip._active[0];
const element = point.element;
const x = element.x;
const topy = -(element.height + 150);
const width = element.width;
const bottomy = 0;
const xoffset = opts.xoffset || 0;
const shadowcolor = opts.color || 'rgba(0, 0, 0, 1)';
ctx.save();
ctx.beginpath();
ctx.fillstyle = shadowcolor;
ctx.fillrect(x - (element.width / 2) + xoffset, bottom, width * 1.3 * 4.3, topy);
ctx.restore();
}
});
const options = {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: 'orange'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
backgroundcolor: 'pink'
}
]
},
options: {
plugins: {
barshadow: {
xoffset: -10,
color: 'red'
}
}
}
}
const 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.7.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to draw the stroke behind bars in Chart.js?
- How to make bar chart animation where all bars grow at the same speed?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Chart.js - Draw charts with opposite bars - How to set both the y-axis ends to positive number?
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How can I draw a line to the highest datapoint in chart js?
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- 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 can I draw lines inside the bars in charts.js?
- Chart js 2.8 - How to make bars grow at the same speed?
- How to reduce the gap between bars on bar chart
- How to draw bars of a chart for a chart to full height?
- How to add text inside the doughnut chart using Chart.js?
- Chart.js Bar Chart: How to remove space between the bars in v2.3?
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart.js Bar Chart - how to chart bars from 0
- How do you hide the title of a chart tooltip?
- How to Draw Gantt chart using chart js or other libraries
- How to add text in centre of the doughnut chart using Chart.js?
- chart js tooltip how to control the data that show
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart js. How to align text by the center of the tooltip?
- ChartJs bar chart - keep bars left instead of equally spread across the width
- How do I change the 'months' language displayed on the date axis in Chart JS?
- 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?
- How to display the labels in doughnut chart using ng2 charts?
More Query from same tag
- Chart.js angular8 Y axis ticks
- Horizontal bar with two yaxes chart js
- Edit legend labels [vue-chart.js]
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item
- Chartjs is disappearing in Ionic tabs when keyboard dismiss
- How to show data values or index labels in ChartJs (Latest Version)
- The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
- Chart js dataset label not showing
- Display multiple chart.js charts using for loop in Django template
- Tooltip does not appear
- How to mutate VueJS prop?
- Chart.js in flex element overflows instead of shrinking
- How to remove rectangle box next to the legend text in Chart.js
- Vue Chart.js -- can I give a line chart a default value for missing data?
- Laravel determine the date from database if MONDAY-SUNDAY
- Chart.js : How I change the x axes ticks labels alignment in any sizes?
- Chart.js - Setting x-axis based on user input
- Chart.js - make background text responsive
- How to disable Chart.js Radar Chart point labels
- Change legend position of ng-charts (using angular2)
- ChartJs in endless loop
- AngularJS Pagination not showing all pages
- when showing large amount of data graph not displaying from middle
- How to use percentage scale with Chart.js
- Trying to update background color on chart.js
- How to render Chart.js 2.x tooltips on top of everything
- Generating different chart results on fly causes flickering
- Creating charts dynamically using ChartJS and AngularJS
- Remove background color in chartjs line chart
- Responsive ChartJS in Bootstrap Table Cell