Set legend position by chart width

hitier
1 parent f0706d95
Showing 1 changed file with 5 additions and 4 deletions Show diff stats
app/main/static/js/charges.js
-const margin = {top: 60, right: 270, bottom: 100, left: 90},
-    width = 1200 - margin.left - margin.right,
+const margin = {top: 60, right: 350, bottom: 100, left: 90},
+    width = 1300 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;
  
 const tooltip_offset = {dx: 0, dy: 100}
  
 const color_scale = d3.scaleOrdinal(d3.schemeCategory10);
  
-const legend_cell_size = 15;
+const legend_cell_size = 15; // colored scare size
+const legend_x = width+20; // begin legend a bit after the end of the chart
  
 // TODO: set main scales attr here then domain later
 // const x = d3.scaleBand()
@@ -70,7 +71,7 @@ function build_chart(div_selector, data_url, project_name, category) {
         let reverse_keys = color_scale.domain().reverse();
  
         let legend = svg.append('g')
-            .attr('transform', 'translate(850, -30)');
+            .attr('transform', 'translate('+legend_x+', -30)');
  
         legend.selectAll()
             .data(reverse_keys)