score:1
this function prints the contents of a canvas correctly
function printimage() {
var canvas = document.getelementbyid("bidstatus");
var win = window.open();
win.document.write("<br><img src='" + canvas.todataurl() + "'/>");
win.print();
win.location.reload();
}
score:3
i was able to use jspdf to print a canvas from chart.js with chrome using the code below. there is already an accepted answer to this question, but as someone else pointed out in the comments, i could not get that solution to work with chrome.
here is a link to jspdf documentation. i am still exploring this so you may find more useful tools to accomplish the same task. i had to use a png instead of a jpeg because of the transparent background of the chart. the jpeg would only appear black. if you want a colored background, add a colored rectangle(rect method in docs) that is the same size and position of the chart image before adding the image. other text and features can also be added to the pdf you are building.
i do not like that the chart image has to be added at a specific location and size and will update this post if i find a better way of doing this.
edit: with jspdf you can use pdf.save('filename.pdf') to replace filesaver.js, provided you want a pdf.
html
<button id="print-chart-btn">print chart</button>
<div class="canvas-container">
<canvas id="random-chart" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
javascript
$('#print-chart-btn').on('click', function() {
var canvas = document.queryselector("#random-chart");
var canvas_img = canvas.todataurl("image/png",1.0); //jpeg will not match background color
var pdf = new jspdf('landscape','in', 'letter'); //orientation, units, page size
pdf.addimage(canvas_img, 'png', .5, 1.75, 10, 5); //image, type, padding left, padding top, width, height
pdf.autoprint(); //print window automatically opened with pdf
var blob = pdf.output("bloburl");
window.open(blob);
});
Source: stackoverflow.com
Related Query
- Print chart using chart js
- Print chart in Chrome build by Chart jS using javascript
- How to print a chart rendered by code
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to run Chart.js samples using source code
- How to add text inside the doughnut chart using Chart.js?
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- How to add an on click event to my Line chart using Chart.js
- Display line chart with connected dots using chartJS
- Dynamically update the options of a chart in chartjs using Javascript
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to Draw Gantt chart using chart js or other libraries
- Detecting hover events over parts of a chart using Chart.js
- Overlapping Bar Chart using Chart.js
- How to add text in centre of the doughnut chart using Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- Chart.js - Add text/label to bubble chart elements without using tooltips?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Blank PNG image using Chart JS . toBase64Image() function
- Chartjs - show elements in all datasets on hover using bar chart
- How to display the labels in doughnut chart using ng2 charts?
- How to create single value Doughnut or Pie chart using Chart.js?
- Is it possible to print a chart with vue-chartjs?
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- set y-axis scale manually in a bar chart using angular-chart.js
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- Extending Existing Chart Types angular chart js using chart js 2.0
More Query from same tag
- In react.js with chart.js, I can't access to my data in a componant
- Remove x-axis label/text in chart.js
- chartjs - canvas size error
- Chartjs v2 stroke shadow
- Chart.js 2.0: How to change title of tooltip
- How to execute a JavaScript function with ChartJS and FreeMarker?
- Hide the element text on line charts since it overlaps with the line
- Styling background (fill) with ChartJs and React
- ChartJS - How to provide datasets an array of objects
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- How to dynamically update Chartjs legend label colors?
- How to plot an equation using ChartJS?
- When updating Chart.js chart the data is updated but canvas is emptied
- Q: Chart.js v2 - x-axis time scale configuration
- Remove tooltip if has no label
- Vuejs prop does not get updated
- How do you create an extension to Chart.js?
- Grouped bar charts each group different level in chart.js
- How to put an image a circle chart
- Convert SQLite PHP array into Javascript array?
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- Labels for Nested Doughtnut Chart React ChartJS
- Automatic resize of chart - AngularChartJS
- React-Chartjs-2 and Chartjs v3:Option Property
- How to set percentage value by default on each bars in horizontal bar chart js
- Graphing the timestamp and data from mysql
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- Adjust length of y-axis using chart.js and bootstrap
- Chartjs working with large and small values
- specify bar width for a single bar