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
- Updating ng-charts barchart datasets in angular 2
- How to make a max value in doughnut chart
- ChartJS Update specific bar's background colour
- Horizontal bar with multiple sections in ChartJs
- time series stream, removing am/pm on x axis and 24 hour format
- Chart.js 2.0: How to change title of tooltip
- Chartjs / ng2-charts line on hover does not work
- Chart.js scale x values
- React js with react-chart js, does not render doughnut chart
- line graph spot in the top middle of the bar graph
- can't dispal 2 garphs on chart.js
- React-Redux and Chart.js props Do not rerender
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- How to Create a Custom Logarithmic Axis in Chart.js
- Chartjs Nested Doughnut Layers With Different Thickness
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
- Add rectangle fill to line chart
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- Why is the data from my API not displaying on my chart.js chart in React?
- yAxis labels are being cut off in ngEchars (Echarts)
- Apply/Register conflicting plugins to different charts
- Parsing error: Unexpected token, expected ";" line 54 in .map function
- Create a heatmap/punchcard Using Chart.js
- Donut Chart : Trigger legend or pie click event while selecting outside filter state change
- Chart.js - Line charts with different colors for each border lines
- Chart.js, change color of specific ticks
- Passing data from a controller to ChartJS - Laravel
- Getting the HTML code of a chart created by chart.js
- Different color for each bar in a bar chart; ChartJS
- How can i add min and max range horizontal line in angular-chart.js