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
- Chart.js: Get point index from chart.getPointsAtEvent(e)
- PrimeFaces PolarArea Chart - GridLine Color Change
- How to use forEach loop on my array to plot x and y variables on my chart (Chart.js)
- Chartjs remove text striking on legend
- Use fetch to get JSON Data for Chart JS
- How to show 2 populations types in one bar using chartjs?
- Chart.js Show Dollar Amount On Left Y And Percent Amount On Right Y
- How to create multiple series on dx-Chartjs
- Add data to line chart js dynamically with multiple lines
- Chartjs with zoom plugin zooms too much with wheel just with single turn
- How to store a chart.js chart options in another file in AngularJS
- Drill down charts dynamic functionality
- Chart.js bar chart label gets hidden on hover
- Dynamically set data on Angular-chart.js
- Adding hours and minutes to a date object for time axis
- Replace a Canvas Pie Chart Onclick
- Chartjs: How to offset ticks on radarchart?
- Chart.js BarChart not appearing
- Chart.js javascript from db stopped working after adding axes
- React js Unhandled Rejection (TypeError): t[l].data.map is not a function
- Chart.js How to actualize canvas due to new x-axis range typed by user
- Hide the element text on line charts since it overlaps with the line
- ChartJS - zIndex value for points/tooltips?
- chart.data.datasets.push() also adds datasets to other charts in array
- Graphs sharing datasets in chartjs
- ChartJs events in Angular
- How to create spacing between Charts and Legends in Chart.js
- How to order a horizontal bar chart - chartJS & Chart.HorizontalBar.js
- How to add background color for doughnut mid using chart,js
- Chartjs does not show on pdf in yii2 despite showing in html view