I have some donut charts created with Chartist.js and tooltips with tmmdata's plugin (https://github.com/tmmdata/chartist-plugin-tooltip) but there is only one thing I want more from this setup - a visual effect similar to the one Google charts uses (https://developers.google.com/chart/interactive/docs/gallery/piechart#donut) that outlines a mouse overed slice with a fainter shade of that same color.
Does anyone have a good idea for how to accomplish this with Chartist?
Related
Here I am trying to draw a gauge graph according to the following design. So far I have found a couple of examples from codepen on drawing gauge graph
But I was not able to find any documentation for styling these graphs.
I'm looking for a way to achieve those inner shadow overlays inside the circle on hover.
As a base I use this gantt chart from Amcharts:
https://www.amcharts.com/demos/gantt-chart-dates/
Is there a way to let the user interactivly resize any of the items? I see there is a resizable Option for XY-charts in Amcharts but it doesn't seem to do what I need. Is there any other method of resizing the bars?
It's seems preety complicated to achieve that with amcharts becuase they are preety robust.
there is a an open-source project that will satisfy your needs - frappe gantt, it allows you to drag the bars themself. (I have no connection to the project).
I attached the graph I want to achieve.. can you recommend any library/ how to do this kind of graph?
I looked at libraries such as charts.js, anycharts,canvasJs, High Charts (has payment client wouldn't like that) One interesting I found is Google Charts' Combo chart but have no idea how to do it.
https://i.stack.imgur.com/hm5uf.png
I used d3 Line chart and append it on top of the progress bar chart. since it's an svg the background is transparent. hope that helps someone
I am using d3 to achieve this chart.
First I thought it is an area chart but the ux said it is a customized / curved chart. So far I am stuck on using corner-radius which is not enough curved. The image is created from sketch then invision so there is no css available on the inspect mode.
I am using google chart APIs to draw a pie chart on the page. This uses some default colors to draw the sectors of the pie. We have an option to provide our own colors to draw the pie chart like colors:['red','#004411'] as suggested in https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart. Now I want to know how can I achieve some glassy effect by providing gradient colors to the APIs? Is there any way with which I cant achieve this?
Already answered here. This is what it says:
It is not possible through standard configuration options for the new
SVG pie charts.
However, CSS can be used to color the elements of the pie chart if you
are in to that sort of thing. CSS can create gradients in various ways
depending on browser, etc. For more information on that, see this
site.
If you want to color a specific element of the pie chart, you can use
something like the developer tools in Google Chrome to help track down
a specific element, and recolor that element using CSS as above.
This will likely not work properly in IE (little does).
In general, however, the use of Gradients tends to just be eye candy,
and actually makes the chart more difficult to read (it doesn't much
matter for pie charts, which are generally not the best choice of
charts to begin with).