Ranges in Bullet Chart Control

22 Jul 20263 minutes to read

Add a range by including an <e-bullet-range> element inside the <e-bullet-range-collection> child of the Bullet Chart.

Ranges represent qualitative categories such as Good, Bad, and Satisfactory along the Bullet Chart scale. The end of a range is specified by the end property within ranges. The starting point of the first range is the minimum value of the quantitative scale, or the end of the previous range.

@{
    List<Range> bulletData = new List<Range>
    {
        new Range { value = 55, target = 75, category = "Year 1"},
        new Range { value = 70, target = 70, category = "Year 2"},
        new Range { value = 85, target = 75, category = "Year 3"}
    };
}

<ejs-bulletchart id="bulletgraph" minimum="0" maximum="100" interval="20" categoryField="category" valueField="value" targetField="target" dataSource="bulletData">
    <e-bullet-range-collection>
        <e-bullet-range end="35"></e-bullet-range>
        <e-bullet-range end="50"></e-bullet-range>
        <e-bullet-range end="100"></e-bullet-range>
    </e-bullet-range-collection>
</ejs-bulletchart>
...
public class Range
{           
    public double value;
    public double target;
    public string category;
}

Ranges in Bullet Chart

Color customization

Enhance the readability of ranges with color and opacity. It can be applied using the Color and Opacity properties in Ranges.

@{
    List<Custom> bulletData = new List<Custom>
    {
        new Custom { value = 55, target = 75, category = "Year 1"},
        new Custom { value = 70, target = 70, category = "Year 2"},
        new Custom { value = 85, target = 75, category = "Year 3"}
    };
}

<ejs-bulletchart id="bulletgraph" height="400" title="Sales Rate" categoryField="category" minimum="0" maximum="100" interval="10" valueField="value" targetField="target" dataSource="bulletData">
    <e-bullet-range-collection>
        <e-bullet-range end="35" color="darkred" opacity="0.5"></e-bullet-range>
        <e-bullet-range end="50" color="red" opacity="1"></e-bullet-range>
        <e-bullet-range end="75" color="blue" opacity="0.7"></e-bullet-range>
        <e-bullet-range end="90" color="lightgreen" opacity="1"></e-bullet-range>
        <e-bullet-range end="100" color="green" opacity="1"></e-bullet-range>
    </e-bullet-range-collection>
</ejs-bulletchart>
...
public class Custom
{           
    public double value;
    public double target;
    public string category;
}

Customizing Ranges with Color in Bullet Chart