CODEWITHSUNDEEP
d3.jsc3.js
Chen Dachao
Chen Dachao

Reputation: 1836

c3.js: axis-y label overlapped

Because of my special requirement, I customized to change the label of y axis upon the y axis, see here.

The answerer solved my problem, but later I got another one. I tried several methods but still without luck.

Question: If the label was too long, it'll be overlapped, see the plnkr demo.

var chart = c3.generate({ 
  padding: {
    top: 10
  },
  data: {
      columns: [
          ['data', 30, 200, 100, 400, 150, 250]
      ]
  },
  axis: {
      y: {
          label: {
              text: 'Y Axis Label Something Else Blah! Blah! Blah!',
              position: 'inner-top'
          } 
      }
  }
});
d3.select(".c3-axis-y-label").attr("transform", "translate(26,-16)");

===========================================================================

// Code goes here
(function(){
  
  var chart = c3.generate({ 
      padding: {
        top: 10
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      axis: {
          y: {
              label: {
                  text: 'Y Axis Label Something Else Blah! Blah! Blah!',
                  position: 'inner-top'
              } 
          }
      }
  });
  
  d3.select(".c3-axis-y-label").attr("transform", "translate(26,-16)");
  
})();
/* Styles go here */

#chart {
  margin: 40px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/c3.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://unpkg.com/[email protected]/d3.js"></script>
    <script src="https://unpkg.com/[email protected]/c3.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script src="script.js"></script>
  </body>
</html>

Does anyone know how to solve it?

Many thanks.

Upvotes: 0

Views: 1492

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

First, remove the clip-path in that axis:

d3.select(".c3-axis-y").attr("clip-path", null)

Then, set the text-anchor to start:

d3.select(".c3-axis-y-label")
    .style("text-anchor", "start")
    .attr("transform", "translate(0,-16)");

Here is your code with the changes:

// Code goes here
(function(){
  
  var chart = c3.generate({ 
      padding: {
        top: 10
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      axis: {
          y: {
              label: {
                  text: 'Y Axis Label Something Else Blah! Blah! Blah!',
                  position: 'inner-top'
              } 
          }
      }
  });
  
  d3.select(".c3-axis-y").attr("clip-path", null)
  
  d3.select(".c3-axis-y-label")
  .style("text-anchor", "start")
  .attr("transform", "translate(0,-16)");
  
})();
/* Styles go here */

#chart {
  margin: 40px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/c3.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://unpkg.com/[email protected]/d3.js"></script>
    <script src="https://unpkg.com/[email protected]/c3.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script src="script.js"></script>
  </body>
</html>

Upvotes: 1

Related Questions