score:8
Add viewportSize and zoomFactor in your phantomjs page:
await page.property('viewportSize', { height: 1600, width: 3600 });
await page.property('zoomFactor', 4);
and add in your html head template
<script>
window.devicePixelRatio = 4;
</script>
score:-1
I can confirm that the @DevTrong response is working with Phantomjs 2.1.1
the only difference is that i set in my settings file:
page.viewportSize = { width: 3600, height: 1600 };
page.zoomFactor = 4;
Note: Its very important to set in you html this part:
<//script>
window.devicePixelRatio = 4;
<//script> (fix the script tag)
score:0
Chart.js now has the parameter "devicePixelRatio". This allows you to increase the resolution directly in Chart.js. (normal 96dpi. target 300dpi; 300/96 = 3.125)
options:{
devicePixelRatio: 3
}
Documentation: https://www.chartjs.org/docs/3.0.2/configuration/device-pixel-ratio.html
score:2
Try setting the zoom factor using a higher DPI for paper in relation to screen DPI:
page.zoomFactor = 300 / 96; // or use / 72
Must be set after page size is defined.
You could also check out this answer:
Poor quality of png images drawn into html canvas
score:2
For Phantom 2, I rendered the charts with a large canvas to get the resolution up and then converted it into a png finally destroying and removing the old canvas and replacing them with an image with responsive CSS classes. Adjusting the knobes on the canvas width and height in addition to Chart.js options will get you a perfect render. We were able to get our rendering speed up with the approach (alternative to SVG renders) and the file size down.
HTML:
<div class="container">
<!-- generated images -->
<img id="someIdImage" class="img-responsive"></img>
<!-- temporary canvas -->
<canvas id="someId" width="2000" height="600"></canvas>
</div>
Javascript:
/**
* _plot() plot with Chart.js
*
* @param {Function} callback
*/
function _plot(callback) {
var config = {}; // some Chart.js config
var id = 'someId';
var el = document.querySelector('#' + id);
var el2d = el.getContext('2d');
// plot instance
var instance = new Chart(el2d, config);
// generate and append image
document.querySelector('#' + id + 'Image').setAttribute('src', el.toDataURL('image/png'));
// destroy instance
instance.destroy();
el.parentElement.removeChild(el);
// callback
if (callback) {
callback();
}
}
Source: stackoverflow.com
Related Query
- PhantomJS renders blurry Chart.js canvas
- Chart js 2.x renders the canvas invisible
- VueJS + Chartjs - Chart only renders after code change
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- set background color to save canvas chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Chart.js pie chart not showing in Google Chrome canvas
- How to fix chart looking blurry in ChartJS?
- React chart : prevent chart's canvas scaling with height and width
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- canvas fill text vanishes when hovering over chartjs pie chart
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Chart Js flickering or switching as i move mouse on canvas
- Chart.js - Font only renders after you reload the canvas
- Create a chart on a dynamically created canvas in Angular-chart.js
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- Chart.js: get chart data from canvas
- Chart js, Canvas is null polymer project
- Chart.js canvas and chart width gets overwritten when redrawn
- How to load chart data to an appended canvas
- Unable to set width and height on canvas in chart js
- How to get the data attribute of the canvas chart created using chartjs
- Bug in canvas class in chart js
- Binding Chart to Canvas height width
- Chart.js reduce canvas size without changing the size of the chart
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- Resize Chart Independently From Legend in ChartJS for Canvas Download
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
More Query from same tag
- ChartJS in Datatable cell performance
- How to customize chart using chartJs?
- Chart with tool tip values
- ChartJS Realtime Animation
- Chart.js Treemap Custom text
- Label issue in doughnut chart using chartjs
- ChartJS scatterplot multi-line tooltip, one box
- Chart.js: passing objects instead of int values as data
- chartjs align origin of the axis to the corner of graph
- Chart.js is not rendered until zoom in in angular 8
- How to allow copying of text within Chart.js tooltips?
- Dynamically add x-axis in React using ChartJS
- how to change default font family in react-chartjs-2
- chart.js horzontalBar Stacked and Grouped - data not showing - a bug?
- Angular 2 - Invoking function from a JS file (chart.js) - function not found
- How to set width of bar dynamically in chart.js?
- How to use same data / labels on two y axes in Chart.js
- Searchable label text Chartjs
- How can I append a calculated value to the end of a bar in Chart.JS?
- Chart.js 2 line charts with separate dataset labels
- Display Chartjs tooltip values outside the canvas - multi line chart
- Multiple y-axis in horizontalBar chart js
- How to display only one label in a multi line char?
- Vue chartjs is not rendering from API
- Chart.js multiple datas between labels
- "export 'default' (imported as 'Chart') was not found in 'chart.js'
- Combo Bar Line Chart with Chart.js
- ERROR TypeError: Cannot read property 'testMethod' of undefined
- Why doesn't my donut chart, created with Chart.js, appear?
- Vuejs with ChartJS populate from API