I want to use a tree but it doesn't display properly? #95

rainyingwork · 2023-11-28T09:58:21Z

rainyingwork
Nov 28, 2023

I want to use a tree but it doesn't display properly? May I ask what I did wrong? Thanks to the author.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.umd.min.js"></script>
</head>
<body>
    <div style="width: 1600px; height: 900px; margin: 0 auto;">
        <canvas id="myChart"></canvas>
    </div>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var boxPlotChart = new Chart(ctx, {
            type: 'tree',
           data: {
              labels: ['A', 'B', 'C'], // node labels
              datasets: [{
                data: [ // nodes as objects
                  { x: 1, y: 2 }, // x, y will be set by the force directed graph and can be omitted
                  { x: 3, y: 1, parent: 0 },
                  { x: 5, y: 3, parent: 0 }
                ]
              }]
            },
            options:{
                responsive: true,
                legend: {
                    position: "top"
                },
                title: {
                    display: true,
                    text: "Chart.js Box Plot Chart"
                }
            },
        });
    </script>
</body>
</html>

sgratzl · 2024-01-21T17:35:25Z

sgratzl
Jan 21, 2024
Maintainer

a minimal example would be:

let chart = new Chart(document.getElementById('myChart').getContext('2d'), {
            type: 'tree',
           data: {
              labels: ['A', 'B', 'C'], // node labels
              datasets: [{
                data: [ // nodes as objects
                  {  },
                  { parent: 0 },
                  { parent: 0 }
                ]
              }]
            }
        });

for the JS code. In your case remove the x,/y properties. They are automatically computed by the layout algorithm.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I want to use a tree but it doesn't display properly? #95

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

I want to use a tree but it doesn't display properly? #95

rainyingwork Nov 28, 2023

Replies: 1 comment

sgratzl Jan 21, 2024 Maintainer

rainyingwork
Nov 28, 2023

sgratzl
Jan 21, 2024
Maintainer