Search code examples
javascriptchartsyuihistogram

how to customize y axis ticks in YUI charts?

I am using the following code to generate a histogram chart using YUI charts:

YUI().use('charts', function(Y) {
    //Data for the chart
    var myDataValues = barResponse.data;
    // Instantiate and render the chart
    var mychart = new Y.Chart({
        dataProvider: myDataValues,
        legend: {
            position: "right",
            width: 300,
            height: 300,
            styles: {
                hAlign: "center",
                hSpacing: 4
            }
        },
        axes: {
            category: {
                styles: {
                    label: {
                        rotation: -45
                    }
                }
            }
        },
        render: "#mychart",
        type: "column"
    });
});

where barResponse is JSON object containing the data,myChart is the html div where the chart will be plotted:

<div id="mychart"></div>

Since my data is low values like : 0.028 , 0.047 .. etc. I am getting very small bars in the chart as the y axis is defined automatically between 0 to 1. That's how it looks:

enter image description here

The question is how can i customize the ticks range of the y axis: to make it for example from 0.0 to 0.3? or in other words how to make the histogram bars bigger for the same dataset?

I checked the API documentation but it's confusing.

Solution

  • Set the YAHOO.widget.NumericAxis.maximum to the desired value.

    The official docs specify that:

    ... If not set explicitly, the axis maximum will be calculated automatically.

    Reference: