Axis
Configuration Options
addBaseline
Type: boolean
Default: false
Adds the baseline path above the labels
addGridlines
Type: boolean
Default: false
Flag to show vertical or horizontal grid lines.
addLabels
Type: boolean
Default: true
Flag to show the text labels on the axis
addTicks
Type: boolean
Default: false
Flag to show the tick lines on the axis.
addZeroline
Type: boolean
Default: false
Makes the gridline corresponding to the zero tick show, and have increased stroke width
axesLabelColor
Type: color
Default: #888
Color of all the labels on the axes
axesLabelFontFamily
Type: string
Default: Open Sans
Font family for axes labels
axesLabelLetterSpacing
Type: number
Default: 0
Units: px
Letter spacing for the axes labels.
axesLabelSize
Type: number
Default: 11
Units: px
Size of the labels
axesLineColor
Type: color
Default: #E3E3E3
Color of all lines found in the axes
chartName
Type: string
Default: Axis
Name of chart for Reporting.
duration
Type: number
Default: 750
Units: ms
Duration of the animation
height
Type: number
Default: 250
Units: px
intelligentTicks
Type: boolean
Default: true
Try and show an appropriate number of ticks given available space.
intelligentTrunc
Type: boolean
Default: true
Truncate the labels so they do not over lap.
maxLegendSpace
Type: number
Default: 50
orient
Type: string
Default: bottom
Sets the orientation of the axis. Options: bottom, top, left, right
scale
Type: scale
Default: function scale(x) { return output(x); }
d3 scale object for the axis.
shouldValidate
Type: boolean
Default: true
Flag for turning off data validation
showTooltip
Type: boolean
Default: false
undefined
textFontFamily
Type: string
Default: Open Sans
tickFormat
Type: function
Default: function (d) { return i18n.summaryNumber(d); }
Label format function for the tick labels.
tickPadding
Type: number
Default: 7
Padding between the tick line and text.
tickSize
Type: number
Default: 5
Size of the tick line.
tickSpacing
Type: number
Default: 40
Space between each tick.
tooltipBackgroundColor
Type: color
Default: #555555
tooltipTextColor
Type: color
Default: #FFFFFF
tooltipTextSize
Type: number
Default: 14
Units: px
undefined
updateSizeableConfigs
Type: boolean
Default: true
Flag for turning off the mimic of illustrator's scale functionality
width
Type: number
Default: 250
Units: px
x
Type: number
Default: 0
The x coordinate for the axis.
y
Type: number
Default: 0
The y coordinate for the axis.
Data Definition
Events
Dispatch Events
External Events
Example
var aHeight = 400;
var aWidth = 400;
// var ascale = d3.scale.ordinal().domain(d3.range(0, 1000)).rangePoints([0,aWidth], 0);
// var ascale = d3.scale.linear().domain([-1000, 1000]).range([0, aWidth]);
var ascale = d3.time.scale().domain([new Date('2014-01-11'), new Date('2014-12-29')]).range([0,500]);
// var ascale = d3.scale.ordinal().domain(['A','B','C']).rangeRoundBands([0, aWidth], 0.25);
//Initialze the widget
var chart = d3.select("#vis")
.append("svg")
.attr('width', 500)
.attr('height', 500)
.append("g")
.attr("transform", "translate(50,250)")
.chart("Axis")
.c({
'width': aWidth,
'height': aHeight,
'scale': ascale,
//'addGridlines': true,
// 'addGridlines': false,
//'addZeroline': true,
// 'addZeroline': false,
//'addTicks': true,
// 'addTicks': false,
//'addBaseline': true,
// 'addBaseline': false,
//'tickSize': 5,
// 'orient': 'top',
'orient': 'bottom',
// 'orient': 'top',
// 'orient': 'right',
showTooltip: true,
})
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw();
// var orient = 'top';
// var orient = 'bottom';
// var orient = 'left';
var orient = 'right';
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': false,
// 'addZeroline': true,
// 'addTicks': true,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': true,
// 'addZeroline': false,
// 'addTicks': true,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': true,
// 'addZeroline': true,
// 'addTicks': false,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': false,
// 'addZeroline': false,
// 'addTicks': true,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': true,
// 'addZeroline': false,
// 'addTicks': false,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': false,
// 'addZeroline': true,
// 'addTicks': false,
// })
// chart.draw();
// }, 500)
// setTimeout(function() {
// chart.c({
// 'orient': orient,
// 'addGridlines': false,
// 'addZeroline': false,
// 'addTicks': false,
// })
// chart.draw();
// }, 500)