javascript - Change position of title in amcharts - Stack Overflow

admin管理员组

文章数量:1355658

I created a simple graph with amcharts and set a title.
Is it possible to change its position? In my case I want the title to be on the left of the graph, maybe even in an angle of 90 degree:

This is an extract of the code:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  //..
  , "titles": [{
    "text": "My Chart Title"
  }, {
    "text": "My Chart Sub-Title",
    "bold": false
  }]
});

Here is a fiddle.

I created a simple graph with amcharts and set a title.
Is it possible to change its position? In my case I want the title to be on the left of the graph, maybe even in an angle of 90 degree:

This is an extract of the code:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  //..
  , "titles": [{
    "text": "My Chart Title"
  }, {
    "text": "My Chart Sub-Title",
    "bold": false
  }]
});

Here is a fiddle.

• javascript
• jquery
• html
• css
• amcharts

Share Improve this question Follow edited Feb 2, 2017 at 9:08 Evgenij Reznik asked Feb 1, 2017 at 8:01 Evgenij ReznikEvgenij Reznik 18.6k4242 gold badges115115 silver badges191191 bronze badges 5

• Override the css of the plugin. – hdotluna Commented Feb 1, 2017 at 8:11
• access with .amcharts-title { } – Carol McKay Commented Feb 1, 2017 at 8:17
• @CarolMcKay:I already tried with .amcharts-title { float: left; position: absolute; left: 0; }, but it didn't change anything. – Evgenij Reznik Commented Feb 1, 2017 at 8:20
• It would have been good if you included this information (what you have tried) in your question. – Carol McKay Commented Feb 1, 2017 at 8:21
• developer.mozilla/en-US/docs/Web/CSS/transform – Carol McKay Commented Feb 1, 2017 at 8:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Why don't you just use label functionality instead?

Contrary to titles, labels can be any text placed anywhere in the chart area, rotated, etc.

"allLabels": [{
  "text": "My Chart Title",
  "bold": true,
  "x": 10,
  "y": "50%",
  "rotation": 270,
  "width": "100%",
  "align": "middle"
}, {
  "text": "My Chart Sub-Title",
  "bold": false,
  "x": 30,
  "y": "50%",
  "rotation": 270,
  "width": "100%",
  "align": "middle"
}]

The only downside is that you will need to manually adjust chart's margins to acmodate for them. The chart does not auto-adjust margins as with titles.

Since you want the labels on the left side, the same as value axis, setting marginLeft will be ignored because the axis will try to auto-calculate the margin needed for the axis' labels. (not counting in the labels)

To fix that set ignoreAxisWidth on the value axis to true.

Here's your Fiddle updated.

As said @Lara_Belle you can modify this with css hack.

You can add css transform for move your text. I used nth-child for assign css on subtitle. Please try below.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }, "titles": [{
    "text": "My Chart Title"
  }, {
    "text": "My Chart Sub-Title",
    "bold": false
  }]

});

#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}
text{
  margin: 50px;
}

.amcharts-title{
  transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
  transform: translate(134px, 10px)
}

<script src="https://www.amcharts./lib/3/amcharts.js"></script>
<script src="https://www.amcharts./lib/3/serial.js"></script>
<script src="https://www.amcharts./lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts./lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts./lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

UPADATE

You can just modify the transform property. ex:

.amcharts-title{
  transform: translate(145px,30px)
}
.amcharts-title:nth-child(2){
  transform: translate(134px, 10px)
}

Please try now

本文标签： javascriptChange position of title in amchartsStack Overflow