You need to sign in to do that
Don't have an account?
Yogesh Biyani
chart js why do I have to resize for the chart to refresh
Based on this (https://success.salesforce.com/answers?id=9063A000000pzg0QAA) I have created a chart LWC but I have to always resize my window for the chart to display it correctly. What am I doing wrong? TIA.
Here is the Apex Class
Here is the component js
component html
compoment xml
Here is the Apex Class
public with sharing class TestData { @AuraEnabled(cacheable=true) public static Map<String,Integer> dataForChartSample() { Map<String,Integer> chartData= new Map<String,Integer>(); for (integer i =0;i< 10; i++) { chartData.put(String.valueOf(i),Integer.valueof((math.random() * 10))); } system.debug(chartData); return chartData; } }
Here is the component js
import { LightningElement,wire,track } from "lwc"; import { ShowToastEvent } from "lightning/platformShowToastEvent"; import { loadScript } from "lightning/platformResourceLoader"; import ChartJS from "@salesforce/resourceUrl/ChartJS"; import dataForChart from "@salesforce/apex/TestData.dataForChartSample"; export default class ChartDemo extends LightningElement { @track mapData= []; cLabel=[]; cData=[]; @wire(dataForChart) wiredResult(result) { if (result.data) { //mapData = []; var conts = result.data; for(var key in conts){ this.cLabel.push(key); this.cData.push(conts[key]); } } } chartJSLoaded; chart; constructor() { super(); this.chartJSLoaded = false; } renderedCallback() { if (!this.chartJSLoaded) { loadScript(this, ChartJS) .then(() => { this.chartJSLoaded = true; var labels1=this.cLabel; var data1=this.cData; console.log( "This is the Label"); console.log(labels1); console.log( "This is the Data"); console.log(data1); this._buildChart2(labels1,data1); }) .catch(error => { this.dispatchEvent( new ShowToastEvent({ title: "Error Loading Chart JS", message: error.message, variant: "error" }) ); }); } } _buildChart2(labels1,data1) { let canvas = this.template.querySelector("canvas"); let context = canvas.getContext("2d"); this.chart = new window.Chart(context, { type: "bar", data: { labels: labels1, datasets: [ { label: "# of activations", data: data1, borderWidth: 1 } ] }, options: { scales: { yAxes: [ { ticks: { beginAtZero: true } } ] } } }); } _buildChart() { let canvas = this.template.querySelector("canvas"); let context = canvas.getContext("2d"); this.chart = new window.Chart(context, { type: "bar", data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [ { label: "# of Votes", data: [12, 19, 3, 5, 2, 3], backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)" ], borderColor: [ "rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)" ], borderWidth: 1 } ] }, options: { scales: { yAxes: [ { ticks: { beginAtZero: true } } ] } } }); } }
component html
<template> <div class="slds-theme_default"> <canvas width="400" height="400" lwc:dom="manual"></canvas> </div> </template>
compoment xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>46.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>