Search results

Customization in React Bullet Chart component

26 Nov 2021 / 3 minutes to read

Orientation

The Bullet Chart can be rendered in different orientations such as Horizontal or Vertical via the orientation property. By default, the Bullet Chart is rendered in the Horizontal orientation.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Sales Rate in dollars'
                        width='20%'
                        orientation='vertical'
                        minimum={0}
                        maximum={100}
                        interval={20}
                        dataSource={[{value: 55, target: 45}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35}></BulletRangeDirective>
                            <BulletRangeDirective end={50}></BulletRangeDirective>
                            <BulletRangeDirective end={100}></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Sales Rate in dollars' width='20%' orientation='vertical' minimum={0} maximum={100} interval={20} dataSource={[{ value: 55, target: 45 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={35}></BulletRangeDirective>
                            <BulletRangeDirective end={50}></BulletRangeDirective>
                            <BulletRangeDirective end={100}></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

Right-to-left (RTL)

The Bullet Chart supports the right-to-left rendering that can be enabled by setting the enableRtl property to true.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        enableRtl={true}
                        minimum={0}
                        maximum={2000}
                        interval={200}
                        dataSource={[{value: 1500, target: 1000}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
                            <BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={2000} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' enableRtl={true} minimum={0} maximum={2000} interval={200} dataSource={[{ value: 1500, target: 1000 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={500} color='red'></BulletRangeDirective>
                            <BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={2000} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

Animation

The actual and the target bar supports the linear animation via the animation setting. The speed and the delay are controlled using the duration and delay properties respectively.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: true }}
                        valueField='value'
                        targetField='target'
                        minimum={0}
                        maximum={2000}
                        interval={200}
                        dataSource={[{value: 1500, target: 1000}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={500} color='red' ></BulletRangeDirective>
                            <BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={2000} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: true }} valueField='value' targetField='target' minimum={0} maximum={2000} interval={200} dataSource={[{ value: 1500, target: 1000 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={500} color='red'></BulletRangeDirective>
                            <BulletRangeDirective end={1500} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={2000} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));

Theme

The Bullet Chart supports different type of themes via the theme property.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { BulletChartComponent, Inject} from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component<{}, {}>{
  render() {
    return (<BulletChartComponent id='ranges'
                animation={{ enable: false }}
                        valueField='value'
                        targetField='target'
                        title='Profit in %'
                        theme='HighContrast'
                        minimum={0}
                        maximum={100}
                        interval={10}
                        dataSource={[{value: 50, target: 45}]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={15} color='red' ></BulletRangeDirective>
                            <BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={100} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
Copied to clipboard
import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
import { BulletRangeCollectionDirective, BulletRangeDirective } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
    render() {
        return (<BulletChartComponent id='ranges' animation={{ enable: false }} valueField='value' targetField='target' title='Profit in %' theme='HighContrast' minimum={0} maximum={100} interval={10} dataSource={[{ value: 50, target: 45 }]}>
                        <BulletRangeCollectionDirective>
                            <BulletRangeDirective end={15} color='red'></BulletRangeDirective>
                            <BulletRangeDirective end={50} color='blue'></BulletRangeDirective>
                            <BulletRangeDirective end={100} color='green'></BulletRangeDirective>
                        </BulletRangeCollectionDirective>
            </BulletChartComponent>);
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));