看看欧美一级视频酷狗

Sets or gets the animationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [animationDuration]="500"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the barSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [barSize]="40%">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the description property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [description]="'Description'"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [disabled]="true">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

enum BulletChartLabelsFormat {
     null,
     d,
     f,
     n,
     c,
     p
}

Sets or gets the labelsFormat property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormat]="'c'"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the labelsFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormatFunction]="labelsFormatFunction"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

enum BulletChartOrientation {
     horizontal,
     vertical
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [orientation]="'horizontal'"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

interface BulletChartPointer {
     value?: Number;
     label?: String;
     size?: Size;
     color?: String;
}

Sets or gets the pointer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [rtl]="true">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

interface BulletChartRanges {
     startValue: Number;
     endValue: Number;
     opacity?: Number;
     color?: String;
}

Sets or gets the ranges property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the showTooltip property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [showTooltip]="false"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

interface BulletChartPointer {
     value?: Number;
     label?: String;
     size?: Size;
     color?: String;
}

Sets or gets the target property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

interface BulletChartTicks {
     position?: BulletChartTicksPosition;
     interval?: Number;
     size?: Number | String;
}

Sets or gets the ticks property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the title property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [title]="'Title'">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the tooltipFormatFunction property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [tooltipFormatFunction]="tooltipFormatFunction"
            >
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxBulletChart.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart (onChange)="Change($event)"
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myBulletChart.destroy();
    }

    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myBulletChart.render();
    }

    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myBulletChart.refresh();
    }

    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxBulletChart #myBulletChart 
             [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target">
        </jqxBulletChart>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myBulletChart.val(50);
    }

    title: string = 'Revenue 2014 YTD'; 
 
    description: string = '(U.S. $ in thousands)';
  
    ranges: any[] = 
    [
        { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 },
        { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 },
        { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 }
    ];
 
    pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'};
 
    target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' };
 
    ticks: any = { position: 'both', interval: 50, size: 10 }; 
}