Why doesn't the chart expand?

B

bimka2021-08-03 21:06:19

Adaptive design

bimka, 2021-08-03 21:06:19

I can't figure out why my chart size is so small. How can I make it more?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Курс валют</title>
  </head>
  <body>
    <h1>Текущий курс доллара и евро за последний месяц</h1>
    <h2>По данным ЦБ РФ</h2>
    <p>Статический одностаничный сайт создан для образовательных целей</p>

  <script src="lib/liteChart.min.js"></script>
  <div id="chart1" style="height: 500px;"></div>
  <script>
  document.addEventListener("DOMContentLoaded", function(){
    // Create liteChart.js Object
    let d = new liteChart("chart", {
      axisX: {
      show: true,
      color: "#e9edf1",
      width: 2,
      value: "₽",
    },
    axisY: {
      show: true,
      color: "#e9edf1",
      width: 2,
      value: "",
      minValue: 0,
      maxValue: 0,
    },
    fill: null,
    gridX: {
      show: true,
      interval: 170,
      fill: 1,
      label: {
        show: true
      },
      stroke:"#e9edf1",
      width:2,
      dasharray:"0 10.04",
      linecap:"round",
    },
    gridY: {
      show: false,
    },
    line: {
      width: 2,
      style: "straight",
      shadow: true,
    },
    point: {
      show: true,
      radius: 4,
      strokeWidth: 3,
      stroke: "#ffffff", // null or color by hex/rgba
    }
  });

  // Set labels
  d.setLabels(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]);

  // Set legends and values
  d.addLegend({"name": "Man", "stroke": "#FFC107", "fill": "#fff", "values": [100, 200, 450, 400, -120, 300, 700, 860, 601, 705, 604, 803, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, 400, 240, 230, 300, 200, 180, 270, 134]});
  d.addLegend({"name": "Woman", "stroke": "#9E9E9E", "fill": "#fff", "values": [200, 350, 240, 480, 150, 240, 230, 300, 200, 150, 270, 200,100, 200, 450, -50, -220, -300, 400, 860, 601, 705, 604, 803,200, 350, 240, 480, 150,53,423]});

  // Inject chart into DOM object
  let div = document.getElementById("chart1");
  d.inject(div);

  // Draw
  d.draw();
      });
    </script>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

sochi-russia, 2021-08-03
@sochi-russia

Try like this

<div id="chart1" ></div>
<style>
#chart1{width:100%;height:500px;}
</style>