The position of the legend in Amchart remains unchanged

Dealing with the issue of chart size when there is a large legend can be challenging. I came across an article that addresses this problem: Putting a legend outside the chart area. However, the downside to this solution is that it restricts placing the legend on the top, left, or even right side of the chart; it remains fixed at the bottom. Any suggestions on how to overcome this limitation?

Here is a sample of what I am aiming to achieve:

JS file `

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "startDuration": 0,
  "theme": "light",
  "addClassNames": true,
  "legend": {
    "divId" : "legenddiv",

  },
  "innerRadius": "30%",
  "dataProvider": [...],
  "valueField": "litres",
  "titleField": "country"
});

var legend = new AmCharts.AmLegend();
legend.position = document.getElementById("mySelect").options;
 chart.addLegend(legend, "legenddiv");

`

html file

  <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<select id="mySelect">
  <option>top</option>
  <option>left</option>
  <option>right</option>
  <option>Bottom</option>
</select>
Chart div:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>

<br />
Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>

http://codepen.io/anon/pen/dXbjrJ

Your insights would be greatly appreciated.

Answer №1

Incorporating the first link you provided as an example from jsfiddle would be more suitable for this scenario.

By altering the class of div#container (top, bottom, right, and left), the legend can be positioned accordingly. Although it is possible to associate a JavaScript event to select and change the class, I have not implemented that yet. Apologies for any confusion caused by my imperfect English.

Link to the example on jsfiddle

HTML

<div id="container" class="right">
  <div class="chart">
    Chart div:
    <div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>
  </div>
  <div class="legend">
    Legend div:
    <div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></div>
  </div>
</div>

CSS

body {
  font-family: Verdana;
  padding: 15px;
}

#legenddiv {
  height: 100px !important;
  /* forcing the height */
  overflow: auto;
  position: relative;
}

#container {
  display: flex;
}

#container > div {
  flex-grow: 1;
  position: relative;
}

.top {
  flex-direction: column;
}

.top .legend {
  order: -1
}

.bottom {
  flex-direction: column;
}

.bottom .chart {
  order: 1;
}

.right,
.left {
  flex-direction: row;
}

.right > div,
.left > div {
  flex-basis: 50%;
  width: 50%;
}

.left .legend {
  order: -1;
}

.right #legenddiv,
.left #legenddiv {
  height: 250px !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Node module's package.json does not have a main "exports" defined

After recently adding the zx NPM package to my project, I encountered a puzzling issue. The installation went smoothly, and I proceeded to import it into my code: import { $ } from 'zx' (async () => { await $`mkdir test` })() However, u ...

In JavaScript, the addition and subtraction buttons may become disabled after nested lists are used

Recently, I embarked on a project to enhance the functionality of restaurant table items and implement value-saving features. Initially, everything worked smoothly with one item list. However, upon introducing a second list and attempting to manipulate it ...

typescript error is not defined

While browsing online, I came across a post discussing how to transfer data from an MVC model to a .ts file. The suggestion was to include the following code: <script type="text/javascript"> var testUrl = @Html.Raw(Json.Encode(Model.testUrl) ...

What methods can be utilized to enhance the visual appeal of a threejs model

I'm currently working on enhancing the visual quality of my 3D models, aiming for smoother edges and more realistic shadows. To achieve this, I am experimenting with an OBJ file format. Here's the code snippet I'm using to load and display t ...

Is there a JavaScript function available to remove comments from previously commented HTML code?

<div id="div1">bar</div> JQuery function addComment(element){ element.wrap(function() { return '<!--' + this.outerHTML + '"-->'; }); } addComment($('#div1')); Looking for assistance in unc ...

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

Leveraging dynamic visuals for your Twitter metadata image

My Twitter application automatically posts the current title being broadcast on my web radio every 20 minutes. It includes details like the artist, number of listeners, and playlist, but does not display album covers. To work around this limitation, I am ...

Switching from using jQuery to Mootools in a short script that helps to balance the heights of

I have a simple script that I frequently use in jQuery to make boxes equal heights. Now, I need to convert it to mootools for a new project where the boxes will be floated left at thirds using style sheets. <div id="box1" class="equals">content he ...

Update Button Visibility Based on State Change in ReactJS

Currently, I'm utilizing a Material UI button within my React application. Despite changing the state, the button remains visible on the screen. Here's the relevant code snippet: function MainPage() { const state = useSelector(state => sta ...

Creating a service function (constructor) in JavaScript

When working with AngularJs and calling a service method: app.service('nameService', function() { this.Service = function (){console.log('hello')} } You can then use this service (object) like so: nameService.Service() My question is, ...

Utilize ASP to limit the application of a CSS file exclusively to the child page

My website consists of a master page and several child pages. I have created specific CSS classes for styling. However, I only want certain child pages to utilize these styles while the master page should always use them. How can I limit the access to th ...

The div on my webpage is not loading its content as expected when using JavaScript

I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Hey there! I have a challenge where I need to calculate the sum of input values for each cell and display it dynamically in the last cell of the row. Take a look at the image below: https://i.stack.imgur.com/0iKEE.png In the image, you can see that the nu ...

Adjusting the transparency level of the map outside a circular zone in the Google Maps JavaScript API v

Currently, I am adding a circle to my map: var optionsCircle = { center: latlang, map: map, radius: 1000, fillOpacity: 0.1, strokeWeight: 0 }; this.circle = new google.maps.Circle(optionsCircle); Instea ...

Using a Javascript for loop to extract the initial event date from a Google Calendar

In my home.html file, the script below is responsible for: Connecting the website to a Google Calendar API Fetching dates and names of rocket launches My concern arises when a calendar for the same rocket has multiple launches in a single month. I aim fo ...

The visibility of content that flickers on the webpage should be hidden with the display: none property during loading

Currently working on a new toy website, but encountering some unexpected behavior. On the homepage HTML file, there are two separate sets of <body> tags: <body class = "intro">...</body> <body class = "home">...</body& ...

Tips for resolving the "trim" of undefined property error in Node.js

Looking to set up a basic WebAPI using Firebase cloud functions with express and TypeScript. Here's the code I have so far: import * as functions from 'firebase-functions'; import * as express from 'express'; const app = express( ...

"Having an issue with the jQuery AJAX call where the success function is not operating as expected

I attempted to retrieve information from a database using PHP by making an AJAX call with jQuery. However, I encountered an issue where the $.ajax function was not functioning as expected. There were no error messages displayed, and the console.log('s ...

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

Using Angular 7 to trigger a file download from the server with proper Authorization

I'm facing some challenges while trying to implement a specific functionality with Angular 7 and I could use some assistance. Here's the scenario: We have a service that returns static files (PDFs), but it requires authorization to access the AP ...