score:0
yes you can do something like that, you can transform the chart to an image and display that, then you can delete your chart which will free up the memory. downside of this will be that its not interactable anymore:
const options = {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: 'orange'
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
backgroundcolor: 'pink'
}
]
},
options: {
animation: false
}
}
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
const chartcontainer = document.getelementbyid('chartjscontainer');
const chartimage = document.getelementbyid('chartimage');
const chart = new chart(ctx, options);
const base64chart = chart.tobase64image();
// set image source to chart image
chartimage.src = base64chart;
// destroy chart and remove canvas
chart.destroy();
chartcontainer.remove();
<body>
<img id="chartimage">
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- ChartJS memory usage
- Usage of ChartJS v3 with TypeScript and Webpack
- How to add ChartJS code in Html2Pdf to view image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- Usage of Chartjs in Angular2 App
- ChartJS have xAxes labels match data source
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Updating Chartjs to 2.5 with custom code
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- ChartJS 2.0 differences in code help needed
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- 'require is not defined' error when attempting to use chartjs in javascript code
- How to run Chart.js samples using source code
- Code for Chartjs Typescript definition file
- Dynamically update values of a chartjs chart
- Different color for each bar in a bar chart; ChartJS
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- How to set ChartJS Y axis title?
- Chartjs Bar Chart showing old data when hovering
- Chartjs change grid line color
- Chart area background color chartjs
- Custom Legend with ChartJS v2.0
- Chartjs Tooltip Line Breaks
- Is it possible in chartjs to hide certain dataset legends?
- Chartjs v2.0: stacked bar chart
More Query from same tag
- How to show Nested charts Radar chart within Doughnut Chart?
- NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
- How to customize chart using chartJs?
- vue-chartjs cannot display the labels and datasets
- Age pyramid chart using chart.js
- ChartNew.js - Remove/Hide zero label from Pie Chart
- Chart.js Using A JavaScript Object
- How to append text or symbol to tooltip of chart.js
- Shorten number labels in Charts.js
- Chartjs 2.7.3: Set Y data at the correct X position axis
- Chartjs Customize Scale Numbers
- Applying Callback To One Y-Axis
- Creating multiple canvas patterns fails
- Chart JS not working with Phonegap
- remove undefined label in the upper part of a chart
- Chart.js - How can i add a legend?
- Adding model data to Charts.js in Rails
- hide data of the datasets in radar chart?
- Vertical stacked bar chart using SharePoint List
- ChartJS and jsPDF - why the background is black?
- Automatic label updates
- Cannot read property 'transition' null chartjs
- Custom gridLines and Axes Chartjs
- Multiple Axis Line Chart
- Using Chart.js in Web Worker
- chart js 3 radar, how to enabe multiline labels
- The bar that contains a low value is almost invisible on the chartjs
- Chart options in angularJs (NodeRed Charts)
- How to work out Chartjs using TypeScript with Chartjs.definitelyTyped from github
- Chart.js show x-axis data from right to left