{"action":"created","issue":{"url":"https://api.github.com/repos/c3js/c3/issues/1044","repository_url":"https://api.github.com/repos/c3js/c3","labels_url":"https://api.github.com/repos/c3js/c3/issues/1044/labels{/name}","comments_url":"https://api.github.com/repos/c3js/c3/issues/1044/comments","events_url":"https://api.github.com/repos/c3js/c3/issues/1044/events","html_url":"https://github.com/c3js/c3/issues/1044","id":59957717,"number":1044,"title":"(Proposed solution) Multiline x-axis labels interfere with the bottom legend","user":{"login":"smuuf","id":6860713,"avatar_url":"https://avatars.githubusercontent.com/u/6860713?v=3","gravatar_id":"","url":"https://api.github.com/users/smuuf","html_url":"https://github.com/smuuf","followers_url":"https://api.github.com/users/smuuf/followers","following_url":"https://api.github.com/users/smuuf/following{/other_user}","gists_url":"https://api.github.com/users/smuuf/gists{/gist_id}","starred_url":"https://api.github.com/users/smuuf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/smuuf/subscriptions","organizations_url":"https://api.github.com/users/smuuf/orgs","repos_url":"https://api.github.com/users/smuuf/repos","events_url":"https://api.github.com/users/smuuf/events{/privacy}","received_events_url":"https://api.github.com/users/smuuf/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/c3js/c3/labels/enhancement/feature%20request","name":"enhancement/feature request","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2015-03-05T14:21:33Z","updated_at":"2016-10-10T08:06:46Z","closed_at":null,"body":"I'd like to propose a fix that would handle the mess that emerges when one is having multiline labels on the x-axis while having the legend positioned at the bottom. *(which happens at least with the newest Chrome)*\r\n\r\n**The problem:** *(don't mind the labels repeating - it's just to make them longer)*\r\n\r\n![image](https://cloud.githubusercontent.com/assets/6860713/6506007/bb357648-c347-11e4-9e7c-81466bce1b65.png)\r\n\r\nAfter a few hours of figuring out how to do this I came up with a rather simplified and ***naive solution***, that consists of 4 actual changes to the c3.js file:\r\n\r\nStep 1: **c3.js, lines 128 - 132**\r\n```\r\n$$.currentMaxTickWidths = {\r\n\tx: 0,\r\n\ty: 0,\r\n\ty2: 0\r\n};\r\n```\r\n...replaced with...\r\n```\r\n$$.currentMaxTickWidths = $$.currentMaxTickHeights = {\r\n\tx: 0,\r\n\ty: 0,\r\n\ty2: 0\r\n};\r\n```\r\n\r\n===\r\n\r\nStep 2: **c3.js, line 345**\r\n```\r\nxAxisHeight = config.axis_rotated || hasArc ? 0 : $$.getHorizontalAxisHeight('x'),\r\n```\r\n...replaced with...\r\n```\r\nxAxisHeight = config.axis_rotated || hasArc ? 0 : $$.getHorizontalAxisHeight('x') + $$.getMaxTickHeight('x', true),\r\n```\r\n\r\n===\r\n\r\nStep 3: **c3.js, insert new method after the body of ```c3_chart_internal_fn.getMaxTickWidth``` method**\r\n```\r\nc3_chart_internal_fn.getMaxTickHeight = function (id, withoutRecompute) {\r\n\tvar $$ = this, config = $$.config,\r\n\t\tmaxHeight = 0, targetsToShow, scale, axis, body, svg;\r\n\tif (withoutRecompute && $$.currentMaxTickHeights[id]) {\r\n\t\treturn $$.currentMaxTickHeights[id];\r\n\t}\r\n\tif ($$.svg) {\r\n\t\ttargetsToShow = $$.filterTargetsToShow($$.data.targets);\r\n\t\tif (id === 'y') {\r\n\t\t\tscale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));\r\n\t\t\taxis = $$.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues);\r\n\t\t} else if (id === 'y2') {\r\n\t\t\tscale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));\r\n\t\t\taxis = $$.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues);\r\n\t\t} else {\r\n\t\t\tscale = $$.x.copy().domain($$.getXDomain(targetsToShow));\r\n\t\t\taxis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);\r\n\t\t\t$$.updateXAxisTickValues(targetsToShow, axis);\r\n\t\t}\r\n\t\tbody = this.d3.select('body').classed('c3', true);\r\n\t\tsvg = body.append('svg').style('visibility', 'hidden').style('height', 0);\r\n\t\tsvg.append('g').call(axis).each(function () {\r\n\t\t\t$$.d3.select(this).selectAll('text tspan').each(function () {\r\n\t\t\t\tvar box = this.getBoundingClientRect();\r\n\t\t\t\tif (box.height >= 0 && maxHeight < box.height) { maxHeight = box.height; }\r\n\t\t\t});\r\n\t\t});\r\n\t\t// TODO: time lag to get maxHeight\r\n\t\twindow.setTimeout(function () {\r\n\t\t\tsvg.remove();\r\n\t\t}, 100);\r\n\t\tbody.classed('c3', false);\r\n\t}\r\n\t$$.currentMaxTickHeights[id] = maxHeight <= 0 ? $$.currentMaxTickHeights[id] : maxHeight;\r\n\treturn $$.currentMaxTickHeights[id];\r\n};\r\n```\r\n\r\n===\r\n\r\nStep 4: **c3.js, remove lines 2624 - 2627**\r\n```\r\n// Calculate x axis height when tick rotated\r\nif (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {\r\n\th = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);\r\n}\r\n```\r\n\r\n===\r\n\r\n**Results:**\r\n\r\n*Solved the original problem:*\r\n![image](https://cloud.githubusercontent.com/assets/6860713/6506281/202298f4-c34a-11e4-8684-94deacab97e5.png)\r\n\r\n*Problem with rotated labels:*\r\n![image](https://cloud.githubusercontent.com/assets/6860713/6506286/2f74a392-c34a-11e4-836c-21b5f5620bde.png)\r\n\r\n*Solved problem with rotated labels:*\r\n![image](https://cloud.githubusercontent.com/assets/6860713/6506291/354bdd58-c34a-11e4-8216-5a891c4ca8d0.png)\r\n\r\n\r\nI am aware of this solution being quite naive :) ..but for the time being it fixes the problem I faced with long multiline tick labels on the x-axis, so - I wanted to share this and maybe offer this as a basis for the proper solution to be implemented in the official code. :cat2:\r\n\r\n**EDIT: I just found out the solution above works only in Chrome (41), not in Firefox or IE. ** \r\n"},"comment":{"url":"https://api.github.com/repos/c3js/c3/issues/comments/252556483","html_url":"https://github.com/c3js/c3/issues/1044#issuecomment-252556483","issue_url":"https://api.github.com/repos/c3js/c3/issues/1044","id":252556483,"user":{"login":"panthony","id":230462,"avatar_url":"https://avatars.githubusercontent.com/u/230462?v=3","gravatar_id":"","url":"https://api.github.com/users/panthony","html_url":"https://github.com/panthony","followers_url":"https://api.github.com/users/panthony/followers","following_url":"https://api.github.com/users/panthony/following{/other_user}","gists_url":"https://api.github.com/users/panthony/gists{/gist_id}","starred_url":"https://api.github.com/users/panthony/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/panthony/subscriptions","organizations_url":"https://api.github.com/users/panthony/orgs","repos_url":"https://api.github.com/users/panthony/repos","events_url":"https://api.github.com/users/panthony/events{/privacy}","received_events_url":"https://api.github.com/users/panthony/received_events","type":"User","site_admin":false},"created_at":"2016-10-10T08:06:46Z","updated_at":"2016-10-10T08:06:46Z","body":"Thanks for this attempt but unfortunately, like you said, it does not work for FF (can't test IE).\r\n\r\nIt also do not fix the fact that the X axis tick values overlap the X axis label.\r\n\r\n"}}
{"actor":{"display_login":"panthony"}}