score:9
Chart.js is built on the HTML5 canvas element.
To use it on node.js you need to mimic this element in node.
There is a package that try to handle all the needed libraries for this purpose, you can find it here chartjs-node
score:3
You can create image from Canvas using toDataURL, so after charts.js renders the graph into the canvas (myChart)
var canvas = document.getElementById('myChart');
var dataURL = canvas.toDataURL();
dataURL will not contain the base64 string of the image. You can write it to file and use the file or use the string any other way.
Check that reference for converting the string to image file if you will. https://gist.github.com/madhums/e749dca107e26d72b64d
Hope this is what you mean you needed to do.
score:6
I had this problem and wound up building a web service that renders Chart.js charts as PNG images. I open sourced my work on this
The service is called QuickChart. For example, if your chart config is:
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dogs',
data: [ 50, 60, 70, 180, 190 ]
}, {
label: 'Cats',
data: [ 100, 200, 300, 400, 500 ]
}]
}
}
You can embed the Chart.js config in the URL like so:
...and it renders your chart as an image!
Note that for more complex charts, you'd want to URL encode the chart options.
There's an interactive editor on the QuickChart website which you can use to generate a URL for a given chart config. You may also view/fork the source code here (it's built on top of node-canvas and chartjs-node-canvas).
score:6
const express = require("express")
const { CanvasRenderService } = require('chartjs-node-canvas');
let app = express()
var configuration = {
type: 'bar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: 'Scored',
data: [2478,5267,734,784,433],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]},
options: {
scales: {
yAxes: [{
ticks: {
precision:0,
beginAtZero: true
}
}]
}
}
}
const mkChart = async (params) => {
const canvasRenderService = new CanvasRenderService(400, 400)
return await canvasRenderService.renderToBuffer(configuration);
}
app.get('/chart', async function (req, res) {
var image = await mkChart(req.query)
res.type("image/png")
res.send(image)
})
app.listen(3061, () => {
})
Run the node script, and goto "http://localhost:3061/chart" which responses the chart png
Reference : https://www.npmjs.com/package/chartjs-node-canvas
Source: stackoverflow.com
Related Query
- Creating chart.js chart directly to PNG in Node js?
- how to not repeat code while creating multiple charts in chart js
- Blank PNG image using Chart JS . toBase64Image() function
- Creating a horizontal bar chart extension on Chart.js
- Creating a grouped and stacked chart in Chart.js
- Chart.js - Creating Custom Chart Types
- Using Chart.js - Creating Legend for Doughnut Chart
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- How to use JSON data in creating a chart with chartjs?
- using react-chartjs-2 , How can I save my chart as png using a download button
- How do I display chart on my HTML page based on JSON data sent by Node JS
- JS node chart from SQL Server not updated
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- chartJSRadar downloadhandler creating empty png
- Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2
- VueJS + Chartjs - Chart only renders after code change
- Creating a stacked budget Vs Actual chart
- How do I destroy/update Chart Data in this chart.js code example?
- Chart.js - creating time series freqency chart with JSON data
- getting additional value fields from data source for dx.chartjs doughnut chart
- 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
- Problem creating chart out of GET request with Angular
- Angular 8: Creating a custom horizontal bar chart
- Getting the HTML code of a chart created by chart.js
- How to run Chart.js samples using source code
- Creating a chart
- Chart.js - Creating a single bar chart with states
More Query from same tag
- ChartJS using AJAX call to retrieve data isn't rendering visualization
- How to display Labels on Doughnut chart in Chart.js
- Chartjs Line Color Between Two Points
- chart.js random weird problems
- No chart display for Chart.js and JSON data
- Is it possible to add a custom font to chart js?
- Prevent y-axis labels from being cut off
- Create New Array from Existing Array Values With Unique and Sum
- Vuejs - Chartjs - turning a doughnut chart to a gauge - rotation
- Want to multiple charts on same page with different data
- Shorten number labels in Charts.js
- chartnew.js cannot show chart after durandal project published
- Typescript types for chartjs-adapter-date-fns
- Stacked bar charts in Chart.js with JSON data
- Visualization of charts using real time data from MSSQL with node.js webserver
- Changing the label of chart
- Different labels in tooltip with chartjs
- How to Center a Chart.js Graph
- Chart.js - add 1 more tick step to an axis
- Add labels to bar chart: chartjs
- Chartjs change horizontal axis value
- Calling data from outside of Chartjs code
- Using custom dataformat in chart.js for Multi Axis Line Chart
- The bar that contains a low value is almost invisible on the chartjs
- Make Chart.js ToolTip different then data
- How to draw the X-axis (line at Y = 0) in Chart.js?
- Chart.js line graph-removing labels on the line
- Grouping the object by key for Chartjs bar chart
- How can I customize p:polarAreaChart tooltips?
- How to make the last item on the chart js active?