React Bullet Charts - Beautiful and Interactive

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { orderDetails } from './data';
import { SampleBase } from '../common/sample-base';

export class Default extends SampleBase<{}, {}> {
  public tooltip: any = {
   enable: true
  };
  public animation: any = {
   enable: false
  };
  public dataSource: any = [{ value: 70, target: 50 }];
  render() {
    return (
        <div>
            <BulletChartComponent id='Revenue'
                tooltip={this.tooltip}
                animation={this.animation}
                valueField='value'
                targetField='target'
                minimum={0}
                maximum={100}
                interval={10}
                title='Revenue YTD'                      
                subtitle='US $(in thousands)'                    
                labelFormat='${value}K'
                dataSource={this.dataSource}>
                <Inject services={[BulletTooltip]}/>
                    <BulletRangeCollectionDirective>
                        <BulletRangeDirective end={30} color="#599C20"></BulletRangeDirective>
                        <BulletRangeDirective end={60} color="#EFC820"></BulletRangeDirective>
                        <BulletRangeDirective end={100} color="#CA4218"></BulletRangeDirective>
                    </BulletRangeCollectionDirective>
            </BulletChartComponent>
        </div>
    )
  }
}