Re: How do you add axis labels to bar charts

[Jacob R Rideout]

myChart

  .xAxisLabel("my axis label")

  .yAxisLabel("This is the Y Axis!");

On Mon, Oct 21, 2013 at 12:22 PM, David Dornan <ddo...@gmail.com> wrote:

How do you add axis labels to bar charts?

[David Dornan]

Thanks Jacob.

Are these labels suppose to be centred on the axis?

[Jacob Rideout]

Yes. But now that I look at it, I think the x axis label isn't correctly centered. Feel free to submit issue.

[David Dornan]

I'm not sure how to add an issue . . . however, I found a solution. I think the issue was related to calculating the x coordinate for the label based on the  x-axis length without margins.   If the mleft margin length is added back the label look better.

 

axisXLab = g.append('text')

.attr("transform", "translate(" + (_chart.xAxisLength() / 2 + _chart.margins().left) + "," + (_chart.height() - _xAxisLabelPadding) + ")")

.attr('class', X_AXIS_LABEL_CLASS)

.attr('text-anchor', 'middle')

.text(_chart.xAxisLabel());

Thanks for your help.

 

David

 

 

On Tuesday, 22 October 2013 16:14:36 UTC-4, Jacob Rideout wrote:

Yes. But now that I look at it, I think the x axis label isn't correctly centered. Feel free to submit issue.

On Tuesday, October 22, 2013 3:05:57 PM UTC-4, David Dornan wrote:

[aisha.w...@gmail.com]

Where/how do you attach this code to the dc.js chart? what is "g"?

[aisha.w...@gmail.com]

I have tried adding labels to bubble, row, and bar charts with no success.  There are no errors but no labels show up on the charts. Please see example below. So how do the labels actually work?

 

barChart.xAxisLabel("my axis label")

.yAxisLabel("This is the Y Axis!")

.width(500)

            .height(250)

            .dimension(playerDimension)

            .group(playerGroup)

.transitionDuration(500)

            .centerBar(true)

.gap(0)

.centerBar(true)

            .x(d3.scale.linear().domain([50, 100]))

.elasticY(true)

.elasticX(true)

.on('postRender', function(chart) {

chart.svg().append('text').attr('class', 'y-label').attr('text-anchor', 'middle')

.attr('x', -200).attr('y', 55).attr('dy', '-20')

.text('Average Overall Score').style('fill','white').style('font-size', '14px');

})

;

[aisha.w...@gmail.com]

I fixed it. there was an issue with my background color and the default color of the text.

[aisha.w...@gmail.com]

resolved. my error.

On Wednesday, November 6, 2013 2:14:34 PM UTC+3, aisha.w...@gmail.com wrote: