DHTMLX Docs & Samples Explorer

Bar Chart properties

Configuration properties are set in the chart constructor. Some of them are mandatory, others - optional.

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#"
})

Mandatory properties

  • container - an id of the html container where you want display a chart
  • view - a chart type
  • value - a property of dataset that chart represent

Optional properties

look and fill

  • alpha - bar transparency
  • border - enables/disables bar border
  • color - a fixed value or template for a bars color
  • gradient - a bars gradient
  • padding - an object that defines padding of chart content:
    • top - top padding
    • bottom - bottom padding
    • left - left padding
    • right - right padding
  • width - a width of bars
  • radius - the radius for bar rounding

item details

  • label - a template for item labels
  • tooltip - a template for item tooltips
  • legend - a template for element text in legend block
    • width - a block width
    • align - an horizontal align of the block: “left”, “right” or “center”
    • valign - a vertical align of the block: “top”,“bottom” or “middle”
    • layout - a layout that defines text stretching in horizontal or vertical direction :“x” or “y”
    • marker - an object that defines markers in the details block
      • type - a marker type: “square” or “round”
      • width - a marker width
      • height - a marker height

scales

  • origin - a scale origin (for vertical charts).
  • yAxis - the vertical scale:

'Vertical Bar' and 'Stacked Vertical Bar' personality

  • title - a scale title
  • color - a scale color
  • start - the mininum value
  • end - the maximum value
  • step - a scale step
  • template - a template of scale labels
  • lines - enables/disables horizontal lines for scale units

'Horizontal Bar' and 'Stacked Horizontal Bar' personality

  • title - a scale title
  • color - a scale color
  • template - a template of scale labels
  • lines - enables/disables vertical lines for scale units

* xAxis - the horizontal scale 'Vertical Bar' and 'Stacked Vertical Bar' personality

  • title - a scale title
  • color - a scale color
  • template - a template of scale labels
  • lines - enables/disables vertical lines for scale units

'Horizontal Bar' and 'Stacked Horizontal Bar' personality

  • title - (string) the scale's title
  • color - the scale's color
  • start - (integer) the mininum value of the scale
  • end - (integer) the maximum value of the scale
  • step - (integer) the scale's step
  • template - () the template of the scale's labels
  • lines - (boolean) enables/disables horizontal lines for scale units

data manipulation

  • group - groups data by a certain property
  • sort - sorts dataset