Theme some Javascript charts - chartjs
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want to use http://www.chartjs.org on a project but need to get the styling looking right. We need 3 charts pie, vertical bar, horizontal.

I have uploaded 2 screens from our comps . The vertical bar will literally be the normal horizontal but on its side.

https://www.dropbox.com/s/scyxvghq99n933q/Photo%20Dec%2008%2C%203%2037%2029%20PM.png?dl=0

https://www.dropbox.com/s/gknpgymnp38vy5c/Photo%20Dec%2008%2C%203%2037%2040%20PM.png?dl=0

Totally fine if you post final on fiddle or codepen

Hi, I have worked on chart js before so I think I might be able to do it.So As far as I got, is that you want the code for the charts as they appear on the pics right? And what styling you are talking about that you need to change.Thank you
Codeword 9 months ago
You got it. Thx!
Qdev 9 months ago
And what about the styling?
Codeword 9 months ago
hi there, i have posted my bounty, please review it, and if you need anything, let me know :)
Chlegou 9 months ago
@codeword. Yes on style. That’s basically all I’m looking for, nothing else related to the page layout. Just the chart properly styled like the design implies. I don’t need bootstrap here just the theme for the charts so when we drop them on our system they are properly styled instead of the default style of the demo components. Thx!
Qdev 9 months ago
please wait. I'll give you a solution that has no bootstrap at all (smaller size and faster)
wlwl2 9 months ago
@Qdev checkout my solution, incase you have any changes you want done.
mashtullah 9 months ago
i'm working on another solution with pretty design, please wait, till i complete
Chlegou 9 months ago
awarded to wlwl2

Crowdsource coding tasks.

5 Solutions


Hi there,

This is my solution, i used bootstrap css, to align elements.

also, i'm rendering elements in canvas so the charts will be responsive also.

i used jsfiddle to provide my solution.

link: https://jsfiddle.net/nicolastsue/v55drhqq/3/

Hope you liked it, since i used bootstrap, the webpage, can be easily adapted to your design.

if you need anything, let me know.

Thx for the effort on this. I think from a theme perspective it has some work needed. . We need to try to align with the colors, line width and overall style.
Qdev 9 months ago
Winning solution
Check the time my first solution was submitted (recorded on Github), in case anyone else copies me (and in that case, that person will probably do a worse job in future edits). Update me if you need any edits or if you really need it on Codepen/JSFiddle.
wlwl2 9 months ago
backup: https://wlwl2chart.herokuapp.com/
wlwl2 9 months ago
no bootstrap, only chart js library, one of its plugins, and html, css, and js. Extra fonts included but can all be deleted, and the respective css can be changed and deleted.
wlwl2 9 months ago
Hey this is outstanding. I think the only issue is I see is on the pie chart the 9% seems to flicker and then not show for me. I assume it’s space constrained and maybe that is the reason?
Qdev 9 months ago
yes. I'll get that fixed- its going to be quick.
wlwl2 9 months ago
I think it's done now?
wlwl2 9 months ago

Using Chart.js v2.7.1 only.

Here is my solution, incase you want any amendments let me know...

DEMO
https://mashtullah.github.io/chartjsbounty/

SOURCE
https://github.com/mashtullah/chartjsbounty

You can also play with it on jsfiddle but the final code is on github where you can test the full demo

Check it out...


Hi again,

I didn't want to edit the last solution, so i created a new responsive one, with pretty design. hope you like it.

DEMO
https://chlegou.github.io/chartjsDemo/

SOURCE
https://github.com/chlegou/chartjsDemo

Code is available at github.

View Timeline