Chart.js: Styling bar charts and line charts with drop shadow and bevels

[MikeIsh]

Been using Chart.js for a few months, and it is fantastic! You've done a great job.

I've used the library enough now that I would like to kick it up a notch. I'm looking for a way to style the bars and lines in those types of charts and in mixed charts so that they have a more "sophisticated" look. I'd like to do that by using a drop shadow on the lines or bars, and maybe even add a bevel to the bars so they have a look that gives them a little more weight and a 3D feel, but still keeping them 2D.

I'm wondering if there is a way to do this with the current library, or with the V2 beta. I'm using the beta in some instances right now. I did some experimenting with the drop shadow in the Chart.Rectangle section of the code, but I'm not skilled enough to get the result I am looking for. Instead, I get shadows on not only the bar and line data portion of the chart, but also on axis labels.

Just looking for a way to style those elements better. Thanks.

[etimberg]

I think this could be done in Chart.Rectangle as you suggest. If you're getting shadows on other stuff, did you remember to remove the styling from the canvas at the end of the draw function?

[MikeIsh]

Thanks for the help! No, I wasn't resetting the style. Did a quick test and that little tweak got me a much better looking result. No more shadows on the labels, which is good. No more shadows on the line chart, but I'm probably just not resetting the style in the right place. I will experiment a little more.

Any idea how to accomplish beveling the bars in the cart to complete the look? As I said, I am not a very skilled Javascript person, so any suggestions are welcome. Thanks, again!

[etimberg]

You can probably draw the bevel by drawing a rectangle around the bar in a different colour. You might need to make the bevel using lines so that you can control the colour for each side.

[etimberg]

Closing since we won't implement this in the core. I'm happy to help someone looking to write a plugin to do this.

[nagix]

I just released chartjs-plugin-style to enable drop shadow. GitHub repository is here.

[jonlutz79]

Is there any way to enable a drop shadow on the shaded area below the line?

[sungjoon-won]

Is there any way to enable a drop shadow on the shaded area below the line?

I also want to know about this. Shadow is covered by background fill of line graph.
Do we have any solution to fix this?