chart_bar_max_width.html 915 B

1234567891011121314151617181920212223242526272829303132333435
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/css">
  4. </head>
  5. <body>
  6. <div id="chart"></div>
  7. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  8. <script src="../js/c3.js"></script>
  9. <script>
  10. var chart = c3.generate({
  11. data: {
  12. columns: [
  13. ['data1', 1030, 1200, 1100, 1400, 1150, 1250],
  14. ['data2', 2130, 2100, 2140, 2200, 2150, 1850]
  15. ],
  16. type: 'bar',
  17. onclick: function (d, element) { console.log("onclick", d, element); },
  18. onmouseover: function (d) { console.log("onmouseover", d); },
  19. onmouseout: function (d) { console.log("onmouseout", d); }
  20. },
  21. axis: {
  22. x: {
  23. type: 'categorized'
  24. }
  25. },
  26. bar: {
  27. width: {
  28. max: 40
  29. }
  30. }
  31. });
  32. </script>
  33. </body>
  34. </html>