demo(line): Color secondary axis data red

Barzille · Mar 11, 2019 · 915a5a5 · 915a5a5
1 parent 79d022e
commit 915a5a5
Show file tree

Hide file tree

Showing 8 changed files with 603 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@
 /bazel-out
 
 # dependencies
-/node_modules
+node_modules
 
 # profiling files
 chrome-profiler-events.json

diff --git a/angular.json b/angular.json
@@ -28,6 +28,7 @@
             ],
             "styles": [
               "src/styles.scss",
+              "src/assets/bootstrap.css",
               "node_modules/prismjs/themes/prism.css"
             ],
             "scripts": [

diff --git a/src/app/line-chart/line-chart.component.html b/src/app/line-chart/line-chart.component.html
@@ -18,7 +18,7 @@
       <tr>
         <th *ngFor="let label of lineChartLabels">{{label}}</th>
       </tr>
-      <tr *ngFor="let d of lineChartData">
+      <tr *ngFor="let d of lineChartData; let i=index" [class]="'line-'+i">
         <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
       </tr>
     </table>

diff --git a/src/app/line-chart/line-chart.component.scss b/src/app/line-chart/line-chart.component.scss
@@ -5,3 +5,7 @@
 .flex-item {
   flex-basis: 50%;
 }
+
+tr.line-2 {
+  color: red;
+}
diff --git a/src/app/line-chart/line-chart.component.ts b/src/app/line-chart/line-chart.component.ts
@@ -12,7 +12,7 @@ export class LineChartComponent implements OnInit {
   public lineChartData: ChartDataSets[] = [
     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
-    { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C', yAxisID: 'y-axis-1' }
+    { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
   ];
   public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
   public lineChartOptions: (ChartOptions & { annotation: any }) = {
@@ -28,6 +28,12 @@ export class LineChartComponent implements OnInit {
         {
           id: 'y-axis-1',
           position: 'right',
+          gridLines: {
+            color: 'rgba(255,0,0,0.3)',
+          },
+          ticks: {
+            fontColor: 'red',
+          }
         }
       ]
     },
@@ -66,9 +72,9 @@ export class LineChartComponent implements OnInit {
       pointHoverBackgroundColor: '#fff',
       pointHoverBorderColor: 'rgba(77,83,96,1)'
     },
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
+    { // red
+      backgroundColor: 'rgba(255,0,0,0.3)',
+      borderColor: 'red',
       pointBackgroundColor: 'rgba(148,159,177,1)',
       pointBorderColor: '#fff',
       pointHoverBackgroundColor: '#fff',

diff --git a/src/app/material/material.module.ts b/src/app/material/material.module.ts
@@ -6,6 +6,7 @@ import {
   MatButtonModule,
   MatGridListModule,
   MatCardModule,
+  MatTableModule,
 } from '@angular/material';
 
 @NgModule({
@@ -17,13 +18,15 @@ import {
     MatButtonModule,
     MatGridListModule,
     MatCardModule,
+    MatTableModule,
   ],
   exports: [
     MatToolbarModule,
     MatTabsModule,
     MatButtonModule,
     MatGridListModule,
     MatCardModule,
+    MatTableModule,
   ]
 })
 export class MaterialModule { }