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
- How to change chart.js grid, and axis color?
- Chartjs Custom Legend with Time on Y-axis
- ChartJS onclick fill area (Radar Chart)
- Making my website interactive with the size of the screen/browser
- What is the order in which the hooks (plugins) of Chart.js are executed?
- laravel query builder with conditions
- Chart.js 3.5: linear gradient doesn't apply properly when multiple bars in the same chart
- Chart JS in React doesn't fetch data
- ChatJS 2.8.0 min/max axis issue and labels on the top
- Chart.JS Can not read property '_meta' of Undefined
- Create grouped-bar using chart.js, php and mysql
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Add a click event to the bar chart of chartjs
- How to ignore same values on ChartJs?
- Chartjs and Polymer 1.7.0
- ChartJS - why is there a visual difference when displaying the same dataset alone or with more datasets?
- Have shading begin at 0 but not scale
- chart.js: alternating background-color for ticks
- First implementation - Chart object seems to be incomplete
- How to draw multiple lines in chart.js
- Chart.js - How to place text outside of radar chart
- How to get rid of old data and of old graph in Chart.js?
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- Format array output to be readable by chartjs in Laravel
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Hiding xAxis labels when using Chart.js
- Chart.js data not initially loaded
- How can I prevent the hover data from displaying in Chart.JS?
- How to have custom colors in ng2-charts and chart.js according to data?
- TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2