The UI component occupies its container's entire area by default. Use the size object to specify the UI component's size if it should be different from that of its container. Assign 0 to size object's height and width properties to hide the UI component.

index.js


$(function() {
    $("#chartContainer").dxChart({
        // ...
        size: {
            height: 300,
            width: 600
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts


<dx-chart ... >
    <dxo-size
        [height]="300"
        [width]="600">
    </dxo-size>
</dx-chart>


import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 
import { DxChartModule } from 'devextreme-angular';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

React

Alternatively, you can style the UI component's container using CSS:

index.js

styles.css


$(function() {
    $("#chart").dxChart({
        // ...
    });
});


#chart {
    width: 85%;
    height: 70%;
}

height

Specifies the height of the UI component in pixels.

Type:

Number

Default Value: undefined

width

Specifies the width of the UI component in pixels.

Type:

Number

Default Value: undefined

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Chart - size

height

width