CODEWITHSUNDEEP
javascriptcsshtml5-canvaschart.js
John
John

Reputation: 75

what is wrong with my code ? java script chart position

I'm trying to set my two Chart.js as horizontal position. but unfortunately my two charts div does not response to the style. Does any one know what is issue with my code.

   <style>
    #Bar {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px;
    }

   #Pie {
        position: absolute;
        left: 500px;
        right: 0px;
        bottom: 0px;
        top: 0px;
    }
</style>



<div class="Bar">

    <label for="myChart">
        Bar chart Title <br />
        <canvas id="myChart" width="300" height="250"></canvas>
    </label>
</div>


<div class="Pie">
    <label for="myPieChart">
        Pie chart Title<br />
        <canvas id="myPieChart" width="250" height="250"></canvas>
    </label>
</div>

enter image description here

Upvotes: 0

Views: 87

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68635

You use css id(#) selector, but you have class(.)es on your div's. Change classes to ids.

<div id="Bar">

    <label for="myChart">
        Bar chart Title <br />
        <canvas id="myChart" width="300" height="250"></canvas>
    </label>
</div>


<div id="Pie">
    <label for="myPieChart">
        Pie chart Title<br />
        <canvas id="myPieChart" width="250" height="250"></canvas>
    </label>
</div>

Or change style's selectors to classes (use .).

.Bar {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

.Pie {
    position: absolute;
    left: 500px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

Example

#Bar {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

#Pie {
    position: absolute;
    left: 500px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}
<div id="Bar">
    <label for="myChart">
        Bar chart Title <br />
        <canvas id="myChart" width="300" height="250"></canvas>
    </label>
</div>


<div id="Pie">
    <label for="myPieChart">
        Pie chart Title<br />
        <canvas id="myPieChart" width="250" height="250"></canvas>
    </label>
</div>

Upvotes: 3

Related Questions