Angular Responsive Charts

Download Angular Chart Samples

Example demonstrates responsive feature of our angular charts that let you render charts seamlessly across devices & browsers. Charts automatically scales to fit it's container even when you change orientation of device.

  1. /* app.component.ts */
  2. import { Component } from '@angular/core';
  3.  
  4. @Component({
  5.   selector: 'app-root',
  6.   templateUrl: './app.component.html',
  7.   styleUrls: ['./app.component.css']
  8. })
  9. export class AppComponent {
  10. 	chartOptions = {
  11. 	  title: {
  12. 		  text: "Monthly Sales Data"
  13. 	  },
  14. 	  theme: "light2",
  15. 	  animationEnabled: true,
  16. 	  exportEnabled: true,
  17. 	  axisY: {
  18. 		includeZero: true,
  19. 		valueFormatString: "$#,##0k"
  20. 	  },
  21. 	  data: [{
  22. 		type: "column", //change type to bar, line, area, pie, etc
  23. 		yValueFormatString: "$#,##0k",
  24. 		color: "#01b8aa",
  25. 		dataPoints: [
  26. 			{ label: "Jan", y: 172 },
  27. 			{ label: "Feb", y: 189 },
  28. 			{ label: "Mar", y: 201 },
  29. 			{ label: "Apr", y: 240 },
  30. 			{ label: "May", y: 166 },
  31. 			{ label: "Jun", y: 196 },
  32. 			{ label: "Jul", y: 218 },
  33. 			{ label: "Aug", y: 167 },
  34. 			{ label: "Sep", y: 175 },
  35. 			{ label: "Oct", y: 152 },
  36. 			{ label: "Nov", y: 156 },
  37. 			{ label: "Dec", y: 164 }
  38. 		]
  39. 	  }]
  40. 	}
  41. }                              
  1. /* app.module.ts */
  2. import { NgModule } from '@angular/core';
  3. import { BrowserModule } from '@angular/platform-browser';
  4. import { AppComponent } from './app.component';
  5.  
  6. import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
  7.  
  8. @NgModule({
  9.   declarations: [
  10.     AppComponent
  11.   ],
  12.   imports: [
  13.     BrowserModule,
  14.     CanvasJSAngularChartsModule
  15.   ],
  16.   providers: [],
  17.   bootstrap: [AppComponent]
  18. })
  19. export class AppModule { }                        
  1. /* app.component.html */
  2. <div>
  3.     <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height: '360px'}"></canvasjs-chart>    
  4. </div>

Chart Customizations

You can set the width & height of the chart using width & height properties. You can also set the width of dataPoints in column / bar, ohlc and candlestick charts by setting dataPointWidth property.

Note   For step by step instructions, follow our Angular Integration Tutorial