title: Dynamic datasets in Chart.js
body: <p>I'm creating a React Component in typescript for each Chart type in chart.js. Most of it is working out fine. However, I've hit my first roadblock as I just remembered that you can have multiple datasets within a chart.</p>
  
  <p>I have the following code for a Bar Chart</p>
  
  <pre><code>export class Bar extends React.Component&lt;IBarProps, {}&gt; {
    constructor(props: IBarProps) {
      super(props)
    }
  
    public render() {
      const className = classNames('bar-chart', this.props.className)
      const ctx = document.getElementById('bar-chart') as HTMLCanvasElement
  
      let bar: Chart = new Chart(ctx, {
        type: this.props.horizontal ? 'horizontalBar' : 'bar',
        data: {
          labels: this.props.labels,
          datasets: [
            {
              label: this.props.label,
              xAxisID: this.props.xAxisID,
              yAxisID: this.props.yAxisID,
              backgroundColor: this.props.backgroundColor,
              borderColor: this.props.borderColor,
              borderWidth: this.props.borderWidth
            }
          ]
        } as ChartData,
        options: {
          elements: { rectangle: { borderSkipped: this.props.borderSkipped } }
        }
      })
  
      bar.update()
      return (
        &lt;div className={className}&gt;
          &lt;canvas
            id="bar-chart"
            width={this.props.width ? this.props.width : '400'}
            height={this.props.height ? this.props.height : '400'}
          /&gt;
        &lt;/div&gt;
      )
    }
    // private push() {
    //   const dataSets = this.props.dataSets
    //   dataSets.forEach(dataSet =&gt; {new Object(label: this.props.label,)})
  
    //   return dataSets
    // }
  }
  </code></pre>
  
  <p>The issue is that the way I've set it up, it'd only support a single dataset. What i need is that for each dataset that is defined, create an object for it and push it into the datasets array. However I'm not a Javascript expert nor typescript expert. </p>
  
  <p>Would anyone be able to show me how to setup the dynamic datasets array? If you need more info see the <a href="http://www.chartjs.org/docs/latest/charts/bar.html" rel="nofollow noreferrer" title="Bar Chart Documentation">Bar Chart Docs</a></p>