I've already asked a very similar question but that was using javascript/php - i've not had much luck finding an ideal solution so want try to emulate a chart using just CSS that looks similar to that below
As you can see the chart rows have a secondary element that is overlayed in a different colour & with a black border. This is the style that I am trying to achieve - can anyone suggest how to best go about this?
Can anyone suggest the best way to go about this possibly by creating another chart overlayed on top of another?
My attempt at doing the chart with pure CSS http://dabblet.com/gist/3142994
... and a second version with a lot less HTML and cleaner CSS: http://dabblet.com/gist/3143479
Instead of reinventing the wheel, in this case I'd recommend using an existing visualisation API. Google offer a fairly extensive one:
https://developers.google.com/chart/interactive/docs/gallery
If you're feeling adventurous and this isn't what you're after, use float: right; to align the left bars to the right.
Related
Not sure this question is allowed here. I am not looking for an opinion but an answer on how to approach this. I am scratching my head where to find help on technically how to approach this.- not sure where else to look for it.
Rails 6.0
tailwindcss
stimulusjs
Here is my question:
I am plotting 2 axis of data (plan to use Chartkick & scattergraph). Once I plot them, I want to show them against a background image. I want to do it on a background like this?
[https://monosnap.com/file/4NNH3y9nOPxXFaClg661DQBw6ujyBe]
I am a novice on CSS. Is it just straight CSS? What is best approach to this? Raw CSS? Plugin? other?
I'd like to make a 'dashboard' page and show some figures in a graphical nice way.
My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database.
Like these elements: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA
I would like to use those donut charts to visualize percentages. But how do I adjust the graphic with CSS (or jQuery).
Found some tutorials on d3.js and other libraries, but I'd like to use the Illustator design instead of generating the graph. Been on Google for 2 days now..
Any tips, hints, links, etc are welcome! Thanks :)
I think this is what you've been looking for: http://www.chartjs.org/
It's a lightweight js-library that allows you to make piecharts, doughnutcharts, .. easily.
Pretty easy to customize too.
Customization is always a pain in the ass for such things, but starting from scratch is much harder, so i highly recommend this.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I'm trying to create a symmetrical pie-chart with 6 pieces of 60 degrees each using html and CSS3 (only).
I've come across this article http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/ but doesn't quite understand the concept.
Can anyone help me with it or explain what is .pieSliceBlue, .hold and .pie classes in the link above responsible for?
Try this:
http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
It is far more easier to use this JQuery and CSS, just need to give the values and pie chart will be created automatically.
I have a javascript plot on my page with "data point highlighter" functionality: when the mouse hovers over the point, you can see the coordinates popup. I also want to place a semi-transparent "sheen" image layer over the plot to make it look glossy. I can achieve this with the z-index, but the on-mouse-over functionality of the js plot stops working. Is there a way to have the sheen layer on top and still have the on-mouse-over of the layer below (the plot layer)? Many thanks...
I can't think of a way to do that easily, apart from splitting apart the plot image and the area that reacts to the mouseover, and placing the latter above the sheen - which may be bothersome to do.
If it's semi-transparent, though, would it be an option to do the whole thing the other way round? Placing the "sheen" below the plot, and making the plot semi-transparent?
This is not possible. Shame.
Actually, I believe it is possible, but it's a bit of a messy workaround, and, in essence, involves capturing mouse/cursor position x/y location and mapping that to the plot layer -- not the easiest or optimal task, let alone completely inefficient. I realize this is an older question, but thought I'd point this out for future users.
Update: Firefox has a CSS property geared toward this in the 3.6: http://demos.hacks.mozilla.org/openweb/pointer-events/