Wijmo UI for the Web
wijbarchart jQuery Widget
Create a customized bar chart to compare the values of items across categories.
Syntax
$(function () {
    var options; // Type:  wijmo.chart.wijbarchart.options
     
    $(".selector").wijbarchart(options);
});
function wijbarchart() : any;
Options
 NameDescription
public Option

The animation option determines whether and how the animation is shown. It defines the animation effect and controls other aspects of the widget's animation, such as duration and easing.

Set the enabled attribute to false in order to disable the animation effect. See Animation for more information about supported animation effects and easing.

Type: object

Default: {enabled: true, duration: 400, easing: "easeinCubic"}

 
public Option

Default value: []

Creates an array of AnnotationBase objects that contain the settings of the annotations to display in the chart.

 
public Option

A value that indicates whether to redraw the chart automatically when resizing the chart element.

Type: Boolean

Default value: true

 
public Option

An object that contains all of the information to create the X and Y axes of the chart.

Type: wijmo.chart.chart_axes object

Default value:

x:{
    alignment: "center",
    style: {stroke: "#999999", "stroke-width": 0.5}, 
    visible: true, 
    textVisible: true,
    text: "",
    textStyle: {fill: "#888", "font-size": 15, "font-weight": "bold"}, 
    labels: {
        style: {fill: "#333", "font-size": 11},
        textAlign: "near", 
        width: null
    },
    compass: "south",
    autoMin: true,
    autoMax: true,
    min: null,
    max: null,
    origin: null,
    autoMajor: true,
    autoMinor: true,
    unitMajor: null,
    unitMinor: null,
    gridMajor: {
        visible: false, 
        style: {stroke: "#CACACA", "stroke-dasharray": "- "}
    },
    gridMinor: {
        visible: false, 
        style: {stroke: "#CACACA", "stroke-dasharray": "- "}
    },
    tickMajor: {
        position: "none", 
        style: {fill: "black"}, 
        factor: 1
    },
    tickMinor: {
        position: "none",
        style: {fill: "black"},
        factor:1
    },
    annoMethod: "values", 
    valueLabels:[]
},
y:{
    alignment: "center",
    style: {stroke: "#999999", "stroke-width": 0.5}, 
    visible: false, 
    textVisible: true, 
    textStyle: {fill: "#888", "font-size": 15, "font-weight": "bold"}, 
    labels: {
        style: {fill: "#333", "font-size": 11},
        textAlign: "center", 
        width: null
    },
    compass: "west",
    autoMin: true,
    autoMax: true,
    autoMajor: true,
    autoMinor: true,
    gridMajor: {
        visible: true, 
        style: {
            stroke: "#999999", 
            "stroke-width": "0.5", "
            stroke-dasharray": "none"
        }
    },
    gridMinor: {
        visible: false, 
        style: {stroke: "#CACACA", "stroke-dasharray": "- "}
    },
    tickMajor: {
        position: "none",
        style: {fill: "black"},
        factor: 1
    },
    tickMinor: {
        position: "none",
        style: {fill: "black"},
        factor:1
    },
    annoMethod: "values",
    valueLabels:[]
}
	
 
public Option

Sets the numeric format of the chart labels that show the value of each chart element. You can use Standard Numeric Format Strings.

Type: String

Default value: ""

 

 
public Option

Default value: null

A value that indicates a function which is used to obtain the content part of the chart label for each chart element.

 
public Option

Sets all of the style options of the chart labels that show the value of each chart element.

Type: Object

Default value: {}

 
public Option

Sets the amount of each bar to render over the edge of the next bar in the same cluster,as a percentage of the bar width.

Type: Number

Default value: 0

Valid values: -100 to 100

 
public Option

Sets the number of pixels by which to round the corner-radius for the bars in the chart.

Type: Number

Default value: 0

 
public Option

Sets the amount of space in pixels between the bars in each cluster.

Type: Number

Default value: 0

 
public Option

Sets the percentage of each cluster's allocated plot area that the bars in each cluster occupy.

Type: Number

Default value: 85

 
public Option

A value that indicates the culture ID name to use in formatting chart text, dates, and numbers.

Type: String

Default value: ""

 

 
public Option

A value that indicates which calendar in a culture with multiple calendars to use in formatting any dates in the chart. This option only takes effect if the specified culture contains the specified calendar.

Type: String

Default value: ""

 
public Option

wijmo.data object that binds a field to the data x array for each series.

Type: Object

Default value: null

 
public Option

The datasource Option is deprecated as of v3.20131.1.

Instead, use the updated data option that supports several types of DataView.

 
public Option

Gets or sets whether control is disabled.

 
public Option

Sets a value indicating whether you can set the font-family of the text using a class instead of options. If set to true, the textStyle option is no longer used for the fallback style.

Type: Boolean

Default value: false

 
public Option

Sets up the object to use as the footer of the barchart.

Type: wijmo.chart.chart_title object

Default:

{
    compass:"south", 
    orientation:"horizontal",
    style: {fill: "#fff", stroke: "none"}, 
    text: "",
    textStyle: {fill: "#000", stroke: "none"}, 
    visible: false
}
 
public Option

Sets up the object to use as the header of the barchart.

Type: wijmo.chart.chart_title object

Default:

{
    compass:"south", 
    orientation:"horizontal",
    style: {fill: "#fff", stroke: "none"}, 
    text: "",
    textStyle: {fill: "#000", stroke: "none"}, 
    visible: false
}
 
public Option

Sets the height of the chart in pixels.

Type: Number

Default value: null

 
public Option

Creates an object to use as the tooltip, or hint, when the mouse is over a chart element.

Type: wijmo.chart.chart_hint

Default:

{
            animated: "fade",
            calloutFilled: false, 
            calloutFilledStyle: {fill: "#000"},
            compass: "north", 
            content: null, 
            contentStyle: {fill: "#d1d1d1", "font-size": 16},
            duration: 120, 
            easing: "easeOutExpo", 
            enable: true, 
            hideAnimated: "fade",
            hideDelay: 150, 
            hideDuration: 120,
            hideEasing: "easeOutExpo",
            offsetX: 0, 
            offsetY: 0,  
            showAnimated: "fade", 
            showCallout: true, 
            showDelay: 150, 
            showDuration: 120, 
            showEasing: "easeOutExpo", 
            style: {fill: "270-#333333-#000000", "stroke-width": "2"},
            title: null, 
            titleStyle: {fill: "#d1d1d1", "font-size": 16},
}
 
public Option

A value that determines whether the bar chart renders horizontally or vertically. When set to false, the bar chart becomes a column chart.

Type: Boolean

Default value: true

 
public Option

Sets up an object that can display an indicator line running horizontally/vertically through the center of each chart element in the chart when the user clicks the chart element.

Type: wijmo.chart.chart_indicator object

Default: {visible: false, style: {stroke: "#000000"}}

 
public Option

Sets a value that determines whether to present stacked bars as a total value of 100 percent, illustrating how each value contributes to the total.

Type: Boolean

Default value: false

 

 
public Option

Creates a legend object to display with the chart.

Type: wijmo.chart.chart_legend object

Default:

{
    compass: "east", 
    orientation: "vertical",
    style: {fill: "#none", stroke: "none"}, 
    text: "", 
    textMargin: {left: 2, top: 2, right: 2, bottom: 2 },
    textStyle: {fill: "#333", stroke: "none"}, 
    titleStyle: {"font-weight": "bold", fill: "#000", stroke: "none"}, 
    visible: true
}
 
public OptionSets the amount of space in pixels between the chart area and the bottom edge of the <div> that defines the widget.

Type: Number

Default value: 25

 
public Option

Sets the amount of space in pixels between the chart area and the left edge of the <div> that defines the widget.

Type: Number

Default value: 25

 
public Option

Sets the amount of space in pixels between the chart area and the right edge of the <div> that defines the widget.

Type: Number

Default value: 25

 
public Option

Sets the amount of space in pixels between the chart area and the top edge of the <div> that defines the widget.

Type: Number

Default value: 25

 
public Option

Sets an array of styles to use in rendering bars in the chart when you hover over them.

Default value: []

 
public Option

Creates an array of series objects that contain data values and labels to display in the chart. 

Each series object consists of a label attribute and a data attribute with its own array of X and Y values. X values are generally text values, while Y values are generally numeric. You can also use the legendEntry attribute to determine whether to show each series object in the legend.

Type: Array

Default value: []

 
public Option

Sets an array of style objects to use in rendering the bars for each series in the chart.

Type: Array

Default value: []

 
public Option

Creates the animation object to use when the seriesList data changes, allowing you to visually show changes in data for the same series.

Type: wijmo.chart.chart_animation object

Default value: {enabled:true, duration:400, easing: "easeInCubic"}

 

 
public Option

A value that indicates whether to show a shadow around the edge of the chart.

Type: Boolean

Default value: false

 
public Option

A value that indicates whether to show a label with the value of each chart element.

Type: Boolean

Default value: true

 
public Option

Sets a value that determines whether to stack bars in the chart to show how each value in a series contributes to the total. If you want each bar to fill up 100 percet of the chart area, you can also set the is100Percent option to true.

Type: Boolean

Default value: false

 
public Option

Creates an object to use for the fallback style of any chart text that does not have other style options set.

Type: Object

Default value: {fill:"#888", "font-size": 10, stroke:"none"}

 
public Option

Sets the width of the chart in pixels.

Type: Number

Default value: null

 
Top
Methods
 NameDescription
public MethodAdd series point to the series list.  
public MethodSuspend automatic updates to the chart while reseting the options.  
public MethodRemove the functionality completely. This will return the element back to its pre-init state.  
public MethodRestore automatic updates to the chart after the options has been reset.  
public MethodExports the chart in a graphic format. The export method only works when wijmo.exporter.chartExport's reference is on the page.  
public MethodThis method returns the bar, which has a set of Raphaël objects (rects) that represent bars for the series data, from the specified index.  
public MethodReturns a reference to the Raphael canvas object.  
public MethodThis method redraws the chart.  
public MethodReturns a jQuery object containing the original element or other relevant generated element.  
Top
Events
 NameDescription
public Event

This event fires before the canvas is painted. You can cancel the event using "return false."

Type: Function

Default: null

 
public Event

This event fires before the series changes. You can cancel the event using "return false."

Type: Function

Default: null

 
public Event

Fires when the user clicks the chart element.

Type: Function

Default: null

 
public Event

This event fires when the user clicks a mouse button.

Type: Function

Default: null

 
public Event

Fires when the user moves the mouse pointer while it is over a chart element.

Type: Function

Default: null

 
public EventFires when the user moves the pointer off of the chart element.  
public EventFires when the user first places the pointer over the chart element.  
public EventFires when the user releases a mouse button while the pointer is over the chart element.  
public EventThis event fires after the canvas is painted.  
public EventThis event fires when the series changes.  
Top
See Also

Widgets

BarChart

Reference

wijbarchart jQuery Widget