Handle width and height of chart js custom component via traits in grapes js

[Aadarsh4u-code]

Let's say I have a custom component of a line chart from ChartJS. While dropping the Line chart in the canvas of grapes js editor it is taking its default width and height which is very big as expected. I would like to handle its size with traits. but could not able to get how to handle it via trait setting of this component. Help, please.

`
//block
export const LineChartBlock = (bm, category,label, type) => {
bm.add(type, //lineChart
{
label, //lineChart
category, //charts
content: '',
});
};

//components
export default (dc, tm, label, type, config) => {
const defaultType = dc.getType('default');
const defaultView = defaultType.view;

dc.addType(type, {
model: {
defaults: {
traits: [
{
type: 'text',
label: 'Width',
placeholder: 'width in px',
name: 'width',
changeProp: 1,
},
{
type: 'text',
label: 'Height',
placeholder: 'height in px',
name: 'height',
changeProp: 1,
}
],

    script: function() {
      const initLib = function() {
        const labels = ['Tokyo','Mumbai','Mexico City','Shanghai','Sao Paulo','New York','Karachi','Buenos Aires','Delhi','Moscow'];
        const data = {
          labels: labels,
          datasets: [{
            label: 'Series 1', // Name the series
            data: [500,50,2424,14040,14141,4111,4544,47,5555, 6811], // Specify the data values array
            fill: true,
            borderColor: '#2196f3', // Add custom color border (Line)
            backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
            borderWidth: 1 // Specify bar border width
          },
          {
            label: 'Series 2', // Name the series
            data: [1288,88942,44545,7588,99,242,1417,5504,75, 457], // Specify the data values array
            fill: true,
            borderColor: '#4CAF50', // Add custom color border (Line)
            backgroundColor: '#4CAF50', // Add custom color background (Points and Fill)
            borderWidth: 1 // Specify bar border width
          }]
        };
        
        const config: any = {
          type: 'line',
          data: data,
          options: {
            responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
            legend: { display: false },
            title: {
              display: true,
              text: 'Predicted world population (millions) in 2050'
            }
          },
        };

      
        // const canvas = document.getElementById('lineChart') as HTMLCanvasElement;
        const canvas = document.querySelectorAll('[data-gjs-type=lineChart]');
        canvas?.forEach((item) => {
          const cv = item as HTMLCanvasElement;
          const ctx = cv?.getContext('2d');
          const myChart = new Chart(ctx, config);
        } );
      };

      //chart js script
      if(typeof Chart === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js';
        script.onload = initLib;
        document.body.appendChild(script);
      } else {
        initLib();
      }
    },
  },
},

isComponent: (el) => {
  if(el.getAttribute && el.getAttribute('data-gjs-type') === type) {
    return { type };
  }
},

view: defaultView.extend({
  init({ model }) {
    //something todo
  },
})

});
};

//editor

`

[artf]

@Aadarsh4u-code I'm wondering why you don't simply rely on component styles?! That should also allow you to have responsive components based on the device.

[Aadarsh4u-code]

[Aadarsh4u-code]

I just want wanted to save all the charts present in the editor to redux in the list of array of the object of charts which contains their datasets, labels, and options, on each change occur at the trait of component .. Help please.........