CODEWITHSUNDEEP
javascriptamcharts
Kivylius
Kivylius

Reputation: 6567

How to margin/pad chartCursor below horizontal axis values

I'm trying to add a bit of margin to my cursor labels (date) as they slightly transparent and don't look good overlapping. So its a hard one to explain so I have included an image to show you:

enter image description here

So I'm trying to push that label with the box [Mar 11, 2014, Tuesday] down, by about 30px.

Looking at the documentation there no official margin or padding for charCursor, but is somewhere else? Or even a temporary hacky solution?

Here what I have currently for chartCursor:

"chartCursor": {
    "enabled": true,
    "animationDuration": 0,
    "balloonPointerOrientation": "vertical",
    "bulletsEnabled": true,
    "categoryBalloonDateFormat": "MMM DD, YYYY \n\r EEEE",
    "cursorAlpha": 0.15,
    "cursorColor": "rgba(255,255,255,0.5)",
    "fullWidth": false,
    "graphBulletSize": 5,
    "leaveCursor": false,
    "tabIndex": 1,
    "valueBalloonsEnabled": true,
    "valueLineAlpha": 1,
    "valueLineBalloonEnabled": false,
}

I also need to know how to fill the first 4 days (im my example) with a solid block and label but that might be a separated question.

Upvotes: 0

Views: 226

Answers (1)

xorspark
xorspark

Reputation: 16012

There's no property within the AmCharts API that allows you to position the chart cursor's category balloon, but you can use CSS to shift the category balloon's SVG path and balloon text div by styling the .amcharts-balloon-bg-categoryAxis and .amcharts-balloon-div-categoryAxis CSS classes. For example:

.amcharts-balloon-bg-categoryAxis {
  transform: translateY(5vh);
}
.amcharts-balloon-div-categoryAxis {
  transform: translateY(5vh);
}

You'll need to set addClassNames to true in your chart config in order to make these classes available.

Demo

Upvotes: 1

Related Questions