resize.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/css">
  4. <style>
  5. .chartcontainer {
  6. background-color: #EEE;
  7. height: calc(100% - 150px);
  8. width: 90%;
  9. border: 1px solid black;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h3>Please drag the window around to watch the chart resize.</h3>
  15. <p>
  16. This example illustrates the case which the issue <a href="https://github.com/c3js/c3/issues/2467">#2467</a> reports.
  17. </p>
  18. <div class="chartContainer">
  19. <div id="chart"></div>
  20. </div>
  21. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  22. <script src="../js/c3.js"></script>
  23. <script>
  24. var chart = c3.generate({
  25. data: {
  26. bindto: '#chart',
  27. columns: [
  28. ['data1', 30, 200, 100, 400, 150, 250],
  29. ['data2', 130, 100, 140, 200, 150, 50]
  30. ],
  31. types: {
  32. data1: 'spline',
  33. data2: 'spline'
  34. }
  35. },
  36. spline: {
  37. interpolation: {
  38. type: 'monotone', // 'cardinal' is default
  39. },
  40. },
  41. });
  42. </script>
  43. </body>
  44. </html>