I am using "wkhtmltopdf" in order to print an html report.
This html contains a pie-chart jquery chart.
This html works perfectly fine.
In the other hand the printting seems to go alright buth when i check the ouput pdf the pie charts leaves some kind of circle around the chart. As you may see in the image.
evidence http://imageshack.com/a/img844/5310/2chv.png
Please,
does somebody knows how to avoid this circle from appering?
Thanks a lot in advance.
I did not solved it but i got and improvemente by changing the donut chart for a pie chart.
And also by reducing the margins between the sections of the chart.
stroke: { color: '#fff', width: 0}
Related
Im following using this example : http://c3js.org/samples/chart_area_stacked.html
I am going to make an area chart for many dataSets and I want to make it so the area chart is not see through. Is there any property I can set or class I can add that will make it so?
You can change the opacity to make the areas opaque by overriding below css rule:-
.c3-area {
opacity: 1 !important;
}
Note:- Markers and tooltip vertical line is not visible fully because of side-effects.
Which looks as shown below:-
I want to use exactly this d3 donut chart.
This 3d chart
However, instead of showing percentage, I'd like to show the raw datas that I am providing.
Ideally, the percentage could be shown (as it is now) and I could show the raw datas for each donut part using an onmouseover tooltip!
Can't make it work.
Thanks a lot for any help!
Are you looking for this,I update the fiddle with tool tip,
Initially add a div to the body i.e.
var div = d3.select("body").append("div").attr("class", "tooltip");
then whenever user makes a mouseover or mousemove on the paths/arcs do the necessary.
have a look in http://jsfiddle.net/Q3dhh/25/
I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
I am using Google's Visualization API to create embedded Pie Charts in my web application.
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
The API works great, I am just having a problem with the look and feel customization.
http://code.google.com/apis/chart/interactive/docs/customizing_charts.html
I can't figure out if there is a way to:
Make the border around a Pie Chart Circular and not rectangular
Editing the width and color of the pie slice margins/seperators?
Here is what I would do:
Using Firebug with Firefox select the chart and look at the CSS. Find the name of the border by selecting it with Firebug.
Next:
1.) Create a CSS to remove the border and embed the chart into a DIV with the border you want. Depending on browser compatibility you may want to use images instead of CSS for the rounded border.
OR
2.) Use CSS to change the border into what you want.
I am using google interactive chart for showing chart like linechart,
barchart, piechart etc.
I am showing legends in the top of chart. For long legends, the
legends are appearing in terms of pagination after new release of Google Visualization API(7th
November 2010) by default.
But i don't want to show this as pagination. Can it possible to show
this in different way by that all legends come under one view in top?
Or can it possible to show the more legends in the second line i.e
just below of 1st line of legends(in case of more)?
I am not able to find how to configure this.
Please help me.
Thanks!
Once can specify the font size of the legend:
legendTextStyle: {color: <string>, fontName: <string>, fontSize: <number>}
or alternatively play around with the width of the chart to make up more room for the legend.
See more: http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html