I have a line chart made with Chart.js. It has positive and negative values. I want to 'fill' it with a background color, but to the bottom of graph–not to 0.
After reading the documentation I figured you'd need to set the fill property to 'start'. But this doesn't seem to work?
Here's a fiddle. Below is a picture to explain.
According to Chart.js documentation:
2 prior version 2.6.0, boundary values was 'zero', 'top', 'bottom'
(deprecated)
If anyone runs into this issue–don't be me. Check that you're using 2.6+ and not 2.4 like me.. 🤦♂️
Related
I get "Uncaught TypeError: Cannot read properties of undefined (reading 'onClick')" for the following code:
var original = Chart.defaults.global.legend.onClick;
It worked in chart.js v2.
As of Chart.js release 3.x
global namespace was removed from defaults. So Chart.defaults.global is now Chart.defaults.
legend, title and tooltip namespaces were moved from Chart.defaults to Chart.defaults.plugins.
For further information, please consult section Defaults in 3.x Migration Guide at https://www.chartjs.org/docs/latest/migration/v3-migration.html.
I finally found the answer to my problem in the Legend documentation:
"The doughnut, pie, and polar area charts override the legend defaults. To change the overrides for those chart types, the options are defined in Chart.overrides[type].plugins.legend."
As I am working on doughnut chart, I changed the code to:
var original = Chart.overrides.doughnut.plugins.legend.onClick;
and it works.
Just like to ask why the point is not displayed on the top most line (blue line, red line is showing the point sample chart). I'm using version 2.7, thanks.
There is a bug listed in v2.7.0 with this issue.
Here are some options, most of them are listed in the issue above.
Try v2.6.0
Add some extra space on top using stepSize option
Wait for a bug fix
I am using wkhtmltopdf on a Ubuntu server. The problem I have been facing is that negative big numbers break lines. I saw this thread: Prevent Breaking of Negative Numbers. My values are read directly from the database, and differently from this guy I don't add a hyphen.
Negative numbers:
Positive:
This is after I upgraded to version wkhtmltopdf 0.12.2.1 (with patched qt). On version 0.9.9, which I had been using I had no problem with PDF generation. I upgraded because in Django, Views which inherited the PDF class from django-wkhtmltopdf would give an error code 1, not generating PDF.
PDFs are generated through command line:
command = 'xvfb-run wkhtmltopdf --footer-right "[page]/[topage]" {s} {o}'.format(
s=html_file.name,
o=target.name
)
I tried to add --zoom 0.5 as a parameter to that command, but only made the PDF worse. Half of the text got cut out off the page and can't be read.
Try with replacing minus sign with − html entity.
I had the same issue. After much time of investigation, I discovered that you can solve the issue if you put min-width (css) in the column (td).
You must be sure that the min-width is enought for the value of td.
After that all work like a charm!
Good Look!
Just create a CSS rule, that says, the text should not wrap.
td.no-wrap {
white-space: nowrap;
}
What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.
What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.
The code is the following:
HTML
<div id='share-facebook'></div>
CSS
#share-facebook {
font-family: FontAwesome;
}
Javascript
var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');
Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?
use canvas.text(50,50,'\uf09a'); instead of canvas.text(50,50,''); and it works
Not really the answer you expect, but you can use Raphael free icons (http://raphaeljs.com/icons/) instead of FontAwesome. Each icon is a Raphael path you can then do:
paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});
then I guess you can apply any transform, scaling, positionning as with any other path.
I did a little update on your fiddle to demonstrate http://jsfiddle.net/K6rrf/1/. I did not remove your code just added the 2 last lines...
Hope this helps a bit
Cheers
I have a problem.
I need to set some kind of z-index, like you can use on the web in HTML/CSS.
Because I have a text on an image, and therefore I want to be sure that it looks good when printing.
Is there some "z-index" code I can use on theese fo:block elements?
Thanks!
/Daniel
XSL-FO defines z-index property:
http://www.w3.org/TR/2001/REC-xsl-20011015/slice7.html#z-index
You have to check your formatting agent whether does support this property.