ng2 charts on Angular 9 not responsive

Question

I created a dashboard application using Angular9 and ng2 charts. The application has ability to drag and drop charts on a Gridster layout and create Dashboards which loads in the Home page.

ng2 charts are set responsive true through chart options, It works all fine except in small screens.

I have following issues in small screens

Gridster is set mobile responsive, so in small screens its removing grid layout and stacking the items. The charts are overlapping.
The legend and label is taking up all the space and chart is either very small or not visible at all.

I think the below steps will fix the issue.

Set the height of canvas for small screens. I cannot set the height in the canvas html as these charts are dragged and dropped and the dashboard widgets are created interactively. Is there a way to set the canvas height only in small screens?
Is there a way to hide the legend only on small screens

Is there a way to change the font size of Title to smaller one on small screens.

 var pieChartOptions: ChartOptions = {
                  responsive: true,
                  plugins: {
                             title: {
                                     display: true,                   
                                     font: {
                                             size: (ctx) => window.innerWidth > 700 ? 8 : 6
                                           }
                                     },
                             legend: {
                                           position: 'right',
                                           display: (ctx) => window.innerWidth > 700,
                                           labels: {
                                                     fontSize: 6,
                                                     usePointStyle: true
                                         }
                                    }
                             };

This chart options is sent as Input to the chart component which has html

<canvas  baseChart width="2" height="1"
[datasets]="ChartData"
[labels]="ChartLabels"
[options]="ChartOptions" 
[legend]="ChartLegend" 
[chartType]="ChartType"
[plugins]="ChartPlugins">

Please advise.

Thanks in advance sresree

score 0 · Answer 1 · answered Aug 05 '21 at 14:28

You can use ternary operators for options to check if you are on a small screen, if you use the scriptable options they are re evaluated every time the screen size changes, for the height of the canvas you can use basic CSS media querys

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'title',
        font: {
          size: (ctx) => window.innerWidth > 700 ? 24 : 12
        }
      },
      legend: {
        display: (ctx) => window.innerWidth > 700
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Fiddle to easily see difference on resize: https://jsfiddle.net/Leelenaleee/2bde1mph/3/

Thank you for the response. I see that your fiddle is working fine. But it is not making any difference in my application. I added the plugin to ChartOptions and set chartoptions in html. — Sree Ja, Aug 06 '21 at 09:49
Unless you add your code to your question people won't be able to help you any better — LeeLenalee, Aug 06 '21 at 10:56

ng2 charts on Angular 9 not responsive

1 Answers1