1

I am attempting to display a sparkline from an array of data coming from an internal API call.

the data comes as an array of numbers, and import { Chart, registerables } from 'chart.js'; Chart.register(...registerables); are imported.

the columns for the grid are:

 public columns = [
    {...},
    { text: 'Price Histiory', datafield: 'priceHistory', outerHeight: 100, innerHeight: 100, width: 200, cellsRenderer: (row: any, column: any, value: any, rowData: any) => {
     
        let chart = '<div><canvas id="chart' + row + '"></canvas></div>'
        this.testy('chart'+row, value)
        return chart
          }
        }
  ]

the only way to get the values I have found is to create a function that takes in the values form the cellrenderer value property and then create this below:

  async testy(chart, value){
    await chart
    const ctx = <HTMLCanvasElement> document.getElementById(`${chart}`);
    ctx.style.height = '35px'
    ctx.style.width = '200px'
 
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [{
          label: '',
          data: [value],
          fill: true,
          borderColor: 'red',
          tension: 0.1
        }]
      }
      }) 
      return myChart
    }

i am currently getting the data to upload the numbers correctly, but I cannot get the line to display. Instead it displays as :

screenshot

I have tried to a wide variety of types for the 'type' arg in the chart.js, but cannot seem to get it to display a simple line/sparkline chart.

i have also dug pretty heavily into the docs.

Any ideas on what I could be doing wrong here?

deitz88
  • 33
  • 5

1 Answers1

0

In the function where you make your chart you specify the data as an array with a single value so only a single point is drawn, chart.js needs at least 2 values to draw a line between them.

Also your chart does not have enough height to display anything correctly so if you want your graph to be useful you also need to give the container some more height

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • the `value` argument is an array though? I like the idea about expanding the cont. ill check that right now. thank you! – deitz88 Sep 12 '21 at 02:44
  • It nowhere showed that value was an array, but if that is so you shouldn't put square brackets around it because then chart.js won't be able to do much with it because it will confuse it with floating bar format so you need to define your data like so: `data: value` – LeeLenalee Sep 12 '21 at 08:29