9514

How to toggle legend layout in highchart

Question:

I am interested to change legend layout on click event as below

<strong>1st</strong> click horizontal - bottom

<strong>2nd</strong> click horizontal top

<strong>3rd</strong> click virtical left

<strong>4th</strong> click virtical right

<strong>Here is</strong> <a href="http://jsfiddle.net/mEf2g/" rel="nofollow">Link to FIDDLE</a>

I don't know how this can be done, this is what I have tried so far.

<strong>HTML</strong>

<script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div> <input id='legend' type='button' value='toggle legend'>

<strong>JAVASCRIPT</strong>

$(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container', zoomType: 'xy', marginLeft: 50, marginBottom: 90 }, yAxis: { reversed: true, //min: 0, //max: 50 }, plotOptions: { series: { stacking: 'normal' } }, xAxis: { opposite: true }, series: [{ name: '01-Jan-2014', data: [ [28, 10], [30, 0] ] }] }); var last = 0; $('#legend').click(function(){ var arr = ['vertical','horizontal']; if(last>arr.length){last=0;} setTimeout(function() { alert(arr[last++]);},10); chart.series[0].update({ legend: { layout: arr[last] }}); }); });

Answer1:

Here's a way to do it <a href="http://jsfiddle.net/bzcu3/" rel="nofollow">here</a>. I hate resorting to setting the internal dirty flags but it seems to work well:

var somePositions = [['center','bottom'], ['center','top'], ['left','middle'], ['right','middle']]; $('#btn').click(function(){ posIdx++; if (posIdx == 4) posIdx = 0; chart.legend.options.align = somePositions[posIdx][0]; chart.legend.options.verticalAlign = somePositions[posIdx][1]; chart.isDirtyLegend = true; chart.isDirtyBox = true; chart.redraw(); });

Answer2:

You need to use tranlsate() function which allows to move SVG elements like legend.

var legend = chart.legend.group; $('#btn').click(function(){ legend.translate(0,0) });

<a href="http://jsfiddle.net/F3cSa/1/" rel="nofollow">http://jsfiddle.net/F3cSa/1/</a>

Recommend

  • Jquery Show & ScrollTop (or ScrollTo)
  • CSS: How to fix overlapping divs
  • Change navbar in bootstrap if user login
  • Android Chronometer starts and stops but carries on counting when stopped
  • D3 get axis values on zoom event
  • onBackPressed() not being executed
  • Webgrid not refreshing after delete MVC
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • FileReader+canvas image loading problem
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to set/get protobuf's extension field in Go?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • what is the difference between the asp.net mvc application and asp.net web application
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unanticipated behavior
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Matrix multiplication with MKL
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do I configure my settings file to work with unit tests?
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?