title: How to render ChartJs with Kotlin React Frontend
body: <p>I am experimenting with a simple project based with Kotlin and React and I have some data I would like to visualise with ChartJs. 
  But I am not sure how exactly to 'connect the dots'. </p>
  
  <p>I am randomly generating some data in background about some dummy 'customers'. It is a continuous <code>stream</code> of data (technically it goes on forever if I don't stop it) and it looks like this: </p>
  
  <pre><code>data:{"name":"John","age": 22,"money":1088.434131568658585820230655372142791748046875}
  data:{"name":"Patric","age": 32,"money":9803.739582599226196180097758769989013671875}
  data:{"name":"Sven","age": 13,"money":6654.2184028105320976465009152889251708984375}
  data:{"name":"Trevor","age": 29,"money":1818.314185601747112741577439010143280029296875}
  data:{"name":"John","age": 30,"money":427.240483111973617269541136920452117919921875}
  data:{"name":"Mark","age": 15,"money":3065.9830877835693172528408467769622802734375}
  data:{"name":"Daniel","age": 18,"money":5860.1371074951812261133454740047454833984375}
  data:{"name":"Chris","age": 28,"money":7547.2329861790212817140854895114898681640625}
  </code></pre>
  
  <p>Here is my Model:</p>
  
  <pre><code>data class CustomerData(var name: String, var age: Int, var money: Int)
  </code></pre>
  
  <p>and my Chart Component:</p>
  
  <pre><code>interface CustomerChartProps : RProps {
      var customerDataList: List&lt;CustomerData&gt;
  }
  
  interface CustomerChartState : RState {
      var customerDataList: List&lt;CustomerData&gt;
  }
  
  class CustomerChart : RComponent&lt;CustomerChartProps, CustomerChartState&gt;() {
  
      override fun CustomerChartState.init(props: CustomerChartProps) {
          customerDataList = props.customerDataList
      }
  
      override fun RBuilder.render() {
          canvas() {
              attrs.id = "myChart"
              attrs.height = "600"
              attrs.width = "600"
              key = "chart"
  
              div {
                  props.customerDataList
              }
  
  
          }
  
          var chart = document.getElementById("myChart")
      }
  }
  
  fun dummyChartData(data: List&lt;CustomerData&gt;) =
          listOf(CustomerData("John", 30, 9999))
  
  fun RBuilder.customerChart(customerDataList: List&lt;CustomerData&gt;) = child(CustomerChart::class) {
      attrs.customerDataList = customerDataList
  }
  </code></pre>
  
  <p>What is not clear is how do I tell the <code>RState</code> that my data is constantly changing. I want to be able to update the chart dynamically, while I get new <code>data</code> from my dummy backend. I am not persisting the data in anyway. </p>
  
  <p>What are your suggestions or recommendations? 
  I cannot seem to find a suitable example/tutorial/documentation either. </p>
  
  <p>I know my question is pretty vague, but I hope at least I am the right direction, or that someone can point out how to get there. </p>