CODEWITHSUNDEEP
javascripthighcharts
Ankit Rawat
Ankit Rawat

Reputation: 13

error with adjusting height of pie chart using highcharts

I want my chart to be inline with other div and with the main div , but I am not able to fix the height of the piechart div , I want the extra padding to be removed . how do i achieve that ?

chart.html

<html>
<head>

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="chart1.js"></script>
</head>
<body>



<div style="width:175px; height :200px">


    <div >
    <table style="width:100%;border:1px solid green">
        <tr>
                <td>Execution %</td>
                <td style="text-align:right">70</td> 
        </tr>
        <tr>
                <td>Pass %</td>
                <td  style="text-align:right">90</td> 
        </tr>

    </table>
    </div>

<div id="chartdiv" style="min-width: 100px; max-width:100%;max-hright:100%;border:3px solid black ">

</div>

</div>

the js file for rendering this chart is :-

$(function() {           
   var chart = new Highcharts.Chart('chartdiv',{
        chart: {

            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },
        plotOptions: {
            pie: {
                size:'100%',
                slicedOffset: 0,
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Months',
            data: [
                ['Jan', 45.0],
                ['Feb', 26.8],
                ['Mar', 8.5],
                ['June', 6.2],
                ['July', 21.0]
            ]}]    
    });
});

Upvotes: 0

Views: 164

Answers (1)

sri_rcnu
sri_rcnu

Reputation: 101

add style for chart div - "chartdiv" 

width:100% !important;
height:100% !important;

Upvotes: 1

Related Questions