score:3
Accepted answer
you need to import the library inside your worker's script.
for this you can use the importscripts()
method.
also be sure to use the v.3 of the library as v2.x was expecting a dom htmlelement, and finally, it seems you need to set a global window
variable (set it to self
) in your worker:
const worker_script = `
const window = self;
importscripts("https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.0.0-beta/chart.min.js");
onmessage = function(event) {
const {canvas, config} = event.data;
const chart = new chart(canvas, config); // error for chart
canvas.width = 500;
canvas.height = 500;
chart.resize();
};
`;
const worker_url = url.createobjecturl(new blob([worker_script], { type: "text/javascript" }));
const worker = new worker(worker_url);
const canvas = document.getelementbyid("canvas").transfercontroltooffscreen();
const config = { type:"line",data:{labels:["january","february","march","april","may","june","july"],datasets:[{label:"my first dataset",data:[65,59,80,81,56,55,40],fill:false,bordercolor:"rgb(75, 192, 192)",linetension:0.1}]} };
worker.postmessage({ canvas, config }, [canvas]);
<canvas id="canvas"></canvas>
Source: stackoverflow.com
Related Query
- Using Chart.js in Web Worker
- 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 constantly update y axis using a C# function to update a Live (Streaming) Chart.js Chart in ASP.NET core Web Application Razor Pages
- How to display chart in android tv using web view(chart.js)
- Pie chart using chart.js and asp.net web Service (asmx)
- 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?
- 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
- Print chart using chart js
More Query from same tag
- ChartJs - Footer color dynamically
- Initializing Chart Js Multiple times for and Array of Objects
- how to change default font family in react-chartjs-2
- Add data dynamically to chart
- I am getting TS2339: Property 'chart' does not exist on type 'Window'?
- Change the font size of chart.js with chartkick
- Importing and using Echarts results in [object error] in Internet Explorer
- how to draw dotted line vertical line at 0 postiion in highChart
- Chart.js multicolored fill sections
- Displaying JSON data into a pie chart using chart.js
- how can we use function of one component into another js file
- Chart.js - How to set a line chart dataset as disabled on load
- Chart.js automatic chosen scale value
- how to add fill on line diagram?
- How to display labels outside the pie chart border?
- How to put an image a circle chart
- How do I refresh data from json-file with charts.js?
- Chart.js do not display in Boostrap tabpanel
- How to wrangle JSON data into arrays of unknown name
- Chartjs unexpected resize and crop after updating data. Using laravel blade view and Livewire
- Multiple stacked bar chart using ChartJs
- Angular chartjs directive
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
- Charts.js & Bootstrap Accordion
- How to map json array to two different array for chart
- How to add new x axis in chart JS?
- Dynamically create chart with Chart.js and PHP
- HTML/Chart JS deserialize JSON from Python Flask
- Chartjs doughnut chart for conditional data
- Chartjs - show elements in all datasets on hover using bar chart