设置React-Chartjs样式以填充父列

Question

我似乎找不到一种方法来使React-Chartjs条形图填充整个引导程序列。

<Col sm={ 6 } className="text-center">
      <Panel>
          <h3 style={{color: "#bfbfbf"}}>1265</h3>
          <p>orders</p>
          <Bar width="100% !important" data={data} options={options}/>
      </Panel>
      <Panel>
          <h3 style={{color: "#bfbfbf"}}>1265</h3>
          <p>orders</p>
          <Bar style={{ width: "100% !important", height: "auto !important" }} data={data} options={options}/>
      </Panel>
</Col>

结果：

​

​

我非常希望不要设置静态输入，因为应用程序将在许多不同大小的屏幕上。响应式大小将是这里的目标。

Answer 1

您可以通过将名为"responsive“的选项设置为true来轻松完成此操作。

<Bar data={data} options={{ responsive: true }}/>

Answer 2

您可以通过使用Responsive选项在JS中完成此操作。

var myChart = {
    type: 'line',
    data: {
      labels: getLabels(),
      datasets: [{
        label: 'Graph1',
        data: getData(),
      }]
    },
    options: {
      'responsive' : true,
    }