CODEWITHSUNDEEP
javascriptgoogle-visualizationdata-visualization
Pawan
Pawan

Reputation: 32331

X axis labels getting overlapped

I am using Google Visulization charts to represent candlestick of a Stock Data. The issue I am facing is that if there is a lot of data the axis labels are overlapped (max it will display 30 days data).

Please tell me if and how it's possible to resolve the issue?

I have tried with 

hAxis: { "title":"Ratings", showTextEvery:1 },

hAxis: { gridlines: { count: 10 } }

http://jsfiddle.net/ovog4njt/2/

Upvotes: 1

Views: 68

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17976

I'll propose a few alternative solutions:

1. Rotate the tick labels

    hAxis: {
        "title": "Ratings",
        showTextEvery: 1,
        slantedText: true,
        slantedTextAngle: 50
    },

enter image description here

2. Reduce the minimum spacing between labels

    hAxis: {
        "title": "Ratings",
        showTextEvery: 1,
        minTextSpacing: 0
    },

enter image description here

3. Reduce the label font

    hAxis: {
        "title": "Ratings",
        showTextEvery: 1,
        minTextSpacing: 0,
        textStyle: {
            fontSize: 8
        }
    },

enter image description here

4. Don't show every single tick

    hAxis: {
        "title": "Ratings",
        showTextEvery: 2,
    },

enter image description here

5. Any combination of the above

JSFiddle

See documentation here

Upvotes: 3

Related Questions