Error Encountered When Attempting to Display Histogram Using jsroot

Hello everyone,

I’ve been attempting to display a histogram using jsroot recently, but I’ve encountered the following error:

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at En (d3.mjs:2:20700)
    at (d3.mjs:2:27988)
    at TCanvasPainter.createCanvasSvg (TPadPainter.mjs:572:24)
    at TCanvasPainter.draw (TCanvasPainter.mjs:814:15)
    at ensureTCanvas (TCanvasPainter.mjs:844:37)
    at THistPainter._drawHist (THistPainter.mjs:2337:14)
    at Object.draw [as func] (TH2Painter.mjs:285:27)
    at performDraw (draw.mjs:384:38)
    at draw.mjs:435:30
    at async test3.html:6:4

Here’s my code:

<script type='module'>
   import { openFile, draw } from '';
   let filename = "";
   let file = await openFile(filename);
   let obj = await file.readObject("hmadc_0;1");
   await draw("drawing", obj, "colz");

I’ve tried this at, but the error persists.

I would appreciate any solutions or advice you might have. Thank you very much in advance.

Hi and welcome on the forum,

Can you provide ROOT file which makes an error?


Thank you for your assistance.

As a new user, I am unable to paste links. Therefore, please add “https : // drive . google . com” to the following link:


Best Regards,

File and data inside is OK.

But probably you missing HTML elements with id “drawing”

Below is the updated code snippet that should resolve the problem:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Import JSROOT from CDN -->
    <script type="text/javascript" src=""></script>
    <div id="drawing"></div>

    <script type='module'>
        // Import necessary functions from JSROOT
        import { openFile, draw } from '';
        // Asynchronous function to open file and draw histogram
        (async () => {
            try {
                // Specify the path to your ROOT file
                let filename = "";
                // Open the file
                let file = await openFile(filename);
                // Read the histogram object
                let obj = await file.readObject("hmadc_0;1");
                // Draw the histogram in the specified HTML element with the "colz" option
                await draw("drawing", obj, "colz");
            } catch (error) {
                console.error("An error occurred:", error);

But, still the histograms are not appearing in the browser, even though there seems no error this time

You need provide layout parameters for you div.

      <div id="drawing" style="width:800px; height:600px"></div>

Thank you i could see the histogram.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.