Properties

animationDuration int null

Sets or gets the animationDuration property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart animation-duration="500" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
barSize string 50%

Sets or gets the barSize property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart bar-size="40%" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
description string 'Description'

Sets or gets the description property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
disabled bool false

Sets or gets the disabled property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart disabled="true" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
height int 100

Sets or gets the height property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
labelsFormat string null

Sets or gets the labelsFormat property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
labelsFormatFunction string null

Sets or gets the labelsFormatFunction property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format-function="labelsFormatFunction" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
orientation string "horizontal"

Sets or gets the orientation property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart orientation="horizontal" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
pointer string { value: 65, label: "Value", size: "25%", color: "" }

Sets or gets the pointer property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
rtl bool false

Sets or gets the rtl property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart rtl="true" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
ranges List<string> [{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]

Sets or gets the ranges property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
showTooltip bool true

Sets or gets the showTooltip property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart show-tooltip="false" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
target string { value: 85, label: "Target", size: 4, color: "" };

Sets or gets the target property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
ticks string { position: "far", interval: 20, size: 10 }

Sets or gets the ticks property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
title string 'Title'

Sets or gets the title property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
tooltipFormatFunction string null

Sets or gets the tooltipFormatFunction property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart tooltip-format-function="tooltipFormatFunction" labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>
width int 500

Sets or gets the width property.

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)"></jqx-bullet-chart>

Events

change Event

Code examples

Bind to the change event of jqxBulletChart. 

<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart on-change="eventHandler()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Methods

destroy Method 
<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)" instance="getInstance()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["destroy"]();									
	}									
</script>									
}
render Method 
<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)" instance="getInstance()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["render"]();									
	}									
</script>									
}
refresh Method 
<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)" instance="getInstance()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["refresh"]();									
	}									
</script>									
}
val Method 
<script src="~/jqwidgets/jqxbulletchart.js"></script>
<script src="~/jqwidgets/jqxtooltip.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Bullet Chart Example";
    BulletChartDataObject pointer = new BulletChartDataObject()
    {
        Value = 270,
        Label = "Revenue 2016 YTD",
        Size = "25%",
        Color = "Black"
    };
    BulletChartDataObject target = new BulletChartDataObject()
    {
        Value = 260,
        Label = "Revenue 2015 YTD",
        Size = "4",
        Color = "Black"
    };
    BulletChartDataObject ticks = new BulletChartDataObject()
    {
        Position = "both",
        Interval = 50,
        Size = "10"
    };
    List<BulletChartRange> ranges = new List<BulletChartRange>()
    {
        new BulletChartRange()
        {
            StartValue = 0, EndValue = 200, Color = "#000", Opacity = 0.5
        },
        new BulletChartRange()
        {
            StartValue = 200, EndValue = 250, Color = "#000", Opacity = 0.3
        },
        new BulletChartRange()
        {
            StartValue = 250, EndValue = 300, Color = "#000", Opacity = 0.1
        }
    };
	string labelsFormatFunction = "function (value, position) { if (position == \"near\") { return value + \" �C\";} else { return value; };"
	string tooltipFormatFunction = "function (pointerValue, targetValue) { return \"<SPAN style=\"COLOR: red\">Current: \" + pointerValue + \"</SPAN>; <SPAN style=\"COLOR: green\">Average: \" + targetValue + \"</SPAN>\";}});";
}
<jqx-bullet-chart labels-format="c" width="500" height="80" pointer="pointer" ticks="ticks" ranges="ranges" target="target" title="Revenue 2016 YTD" description="(U.S. $ in thousands)" instance="getInstance()"></jqx-bullet-chart>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["val"](50);									
	}									
</script>									
}
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.