score:1
I've been working on a project trying to produce graphs with chartjs and then printing them using Chrome's print to PDF functionality, and I found that the chartjs graphs look poor. After reading various threads both on stackoverflow and github I developed one solution that worked well enough for me.
In my particular case I need the graphs at a fixed size and I can't have them be responsive because I need them to fit within the printed page correctly. I use style tags to set the size:
<canvas style="width: 300px; height: 300px" />
I've found that if you set responsive: false in the chart and then use the style tags like that, Chartjs won't mess with the size of the chart. Using any other method like setting width or height (not the style width or height) or using css classes will not set it properly. Chartjs only seems to work when I set the element's inline style tag for this.
Anyway, the trick that worked for me in getting better PDF output was to have Chartjs render a larger chart and then scaling it down to a smaller size so it fits on my page correctly.
Let's say for some reason we want a 300x300 pixel chart and that it looks poor when we print it to PDF. We need to have Chartjs draw this chart into a larger chart and then resize it down to 300x300. In my own project I am having Chartjs draw it 2x as large. So for this example I would make a canvas element that is 600x600 as follows:
<canvas style="width: 600px; height: 600px;" class="graph" />
At the same time I have a "graph" css class with height and width set to 300px. The chart will not render at 300px because of the inline style however.
You can then make the chart as you normally would, but immediately after the line of code that makes the chart, you remove the inline style tag from the chart. I found that when you do this, chartjs will draw the chart to the larger 600x600 size but then the chart instantly gets resized to 300x300. Here is an example of what the code looks like:
var ctx = canvas.getContext('2d'); var mychart = new Chart( ctx ,{ .... }); canvas.removeAttribute("style");
The canvas.removeAttribute removes the inline style tag, so then the css class takes effect and instantly causes the canvas to re-render at the smaller size. There is no flash or any indication that this has happened, yet I've found that you get a much higher quality looking chart.
There is one other issue with this. You will have to design your chart for the larger 600x600 size for example in order to get it to look right. When you draw the chart at a larger size, the lines and fonts don't get resized so everything looks really tiny. I had to set my chart manually to the larger size to design it and figure out good fonts and line sizes for the graph first, and then do the resize trick here.
I have also found that simply using the smaller sized chart and making thicker lines or larger fonts does not seem to have the same effect as sizing everything up first, and then rendering it as a smaller size.
score:6
Since a few versions Chart.js has the parameter devicePixelRatio. By default, the canvas is rendered in the DPI number by monitor, so 96 or Retina - not ideal for a printout, but perfect for the screen.
If you increase this value, more pixels are created. Expand the value so that you can export the chart in print quality as a Base64 image. The value does not affect the display of the chart on the monitor.
In my case, I set the value to 1.5.
options:{
devicePixelRatio: 1.5
}
Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html Works wonderfully ...
score:10
The resolution comes from the Canvas size. The more you increase your Canvas (width and height), the better will be the resolution when downloading your PDF.
However, you probably don't want to increase the canvas size too much, so, one trick you could use is to create a hidden Canvas, with a higher width and height, use it to print the chart and create the PDF, getting a better PDF quality.
Here is a fiddle demonstrating this, with an option to download a PDF created from the original canvas/chart, and another option to download a new PDF from the hidden canvas/chart. You can see how the quality increase quite a bit when comparing both results.
https://jsfiddle.net/crabbly/kL68ey5z/
I don't think this is the best solution, however, it is the only way I could come up to increase the quality of my PDF chart files. I'm currently playing around both libraries, specially how jsPDF treats the w
and h
arguments when creating the docs.
Also, Chart.js does come with a built in function to extract an image form the chart (.toBase64Image()
), however, the quality seems to be worse when I tested.
Source: stackoverflow.com
Related Query
- Chartjs + jsPDF = Blurry image
- How to add ChartJS code in Html2Pdf to view image
- Adding Image inside Linechart points in ChartJs
- ChartJS and jsPDF - why the background is black?
- Show image instead a point in a ChartJS scatter plot
- unable to add background color to the canvas using jspdf and chartjs
- Adding image on the top of bar in chartjs
- why is the background black when with Chartjs export to a image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Render chartjs and export image to data not in the DOM
- Chartjs - resize an image positioned in a column
- ChartJS have xAxes labels match data source
- Updating Chartjs to 2.5 with custom code
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- ChartJS 2.0 differences in code help needed
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Exporting dynamic chartjs to jspdf
- chartjs maintain points position, put image alongside with label
- Chartjs Exporting ImageExports Empty Dark Image
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- Add an image as background in ChartJS chart area [Not to canvas]
- How to get the image from graph created using chartjs
- Chartjs bar chart blurry when height is set
- 'require is not defined' error when attempting to use chartjs in javascript code
- How to run Chart.js samples using source code
- Reloading ChartJs Image
- Code for Chartjs Typescript definition file
- Javascript highcharts code similar to image
More Query from same tag
- How to create Stacked bar chart from JSON in chart.js
- Data of same dataset don't have the same color in chartjs
- Charts.js display two combined line charts for last 7 days
- Chart.js - get base 64 encoded string as variable
- How to make x-axis start from 0 in chart.js graphs?
- How to show label at right side of Y axis same as left side of Y Axis ChartJS
- Click anchors the label to its respective section HTML in Chart.js
- chartjs: How to create single outer border for stacked barchart
- Chartjs extended doughnut with text tooltip issue
- Chart.js: chart does not update
- Display all tooltips in chartjs
- Legend option destroys pie chart in Chart.js
- how to set the color of all points in a line graph to the same in chart.js?
- Chart.js not show in my function (function used in ajax) jquery
- How to edit my custom tooltips in my line chart using chart.js?
- Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item
- decrease bar spacing chartJS v2
- Line is rendering only vertical line instead of sloped line
- Show values in Chart.js Pie chart parts
- chartjs dataset attribute hidden from function
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Putting label array to the chartjs?
- How to add font color in vue-chartjs
- Chart.js Y-Axis data not rendering
- How to display value of only one datapoint in line chart
- ChartJS create chart Ajax
- JavaScript - Chart.js tooltip shows wrong x-axis value
- How to export report as PDF/CSV in ChartNew.js
- How do I place a new line in a label with Chart.js?