Chart width does not apply on load. Have to resize window.
Hi,
I created dashboard layout and included charts inside panels. But on page load charts are distorted as below
When I resize the screen the chart optimizes to the correct widths.
My files are as below.
package.json
{
"name": "syncfusion-layouts",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@syncfusion/ej2-vue-charts": "^19.3.45",
"@syncfusion/ej2-vue-layouts": "^19.3.44",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^8.0.0-rc.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
App.vue
<template>
<div>
<div class="control-section">
<!-- DashboardLayout element declaration -->
<ejs-dashboardlayout id='defaultLayout' :cellSpacing="spacing" :columns="6">
<div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="2">
<div class="e-panel-container">
<div>
<chart id="first" />
</div>
</div>
</div>
<div id="two" class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="2">
<div class="e-panel-container">
<div>
<chart id="second" />
</div>
</div>
</div>
<div id="three" class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="2">
<div class="e-panel-container">
<div>
<chart id="third" />
</div>
</div>
</div>
<div id="four" class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="2">
<div class="e-panel-container">
<div>
<chart id="fourth" />
</div>
</div>
</div>
</ejs-dashboardlayout>
<!-- end of dashboardlayout element -->
</div>
</div>
</template>
<script>
import Vue from "vue";
// Import syncfusion dashboardlayout component from layouts package
import { DashboardLayoutPlugin } from "@syncfusion/ej2-vue-layouts";
import Chart from "./components/Chat.vue";
Vue.use(DashboardLayoutPlugin);
export default {
components: {
Chart
},
data: function() {
return {
count: 8,
spacing: [10,10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
/* DashboardLayout element styles */
#defaultLayout .e-panel .e-panel-container {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
}
.text-align {
line-height: 80px;
}
#defaultLayout .e-panel {
transition:none !important;
}
</style>
Chart.vue
<template>
<div :id="'container'+id" style='display:block;height:100%;width:100%;'>
<ejs-chart :id="'chart'+id" class="chart-content" ref="lineInstance" height="350px" width="100%" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :chartArea='chartArea'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Jan' width=2 :marker='marker' > </e-series>
<e-series :dataSource='seriesData1' type='Column' xName='x' yName='y' name='Feb' width=2 :marker='marker' fill="rgb(239, 183, 202)"> </e-series>
<e-series :dataSource='seriesData2' type='Column' xName='x' yName='y' name='Mar' width=2 :marker='marker' > </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { Chart, ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, DataLabel, Tooltip, Legend } from "@syncfusion/ej2-vue-charts";
Chart.Inject(ColumnSeries, Category, DataLabel, Tooltip, Legend);
export default {
name: "Chart",
props: {
id: {
type: String
}
},
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective,
},
data() {
return {
seriesData: [
{ x: 'Jan', y: 46 }, { x: 'Feb', y: 27 }, { x: 'Mar', y: 26 }
],
seriesData1: [
{ x: 'Jan', y: 37 }, { x: 'Feb', y: 23 }, { x: 'Mar', y: 18 }
],
seriesData2: [
{ x: 'Jan', y: 38 }, { x: 'Feb', y: 17 }, { x: 'Mar', y: 26 }
],
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
},
chartArea: { border: { width: 0 } },
//Initializing Primary Y Axis
primaryYAxis:
{
majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
},
marker:
{ dataLabel:
{ visible: false, position: 'Top', font: { fontWeight: '600', color: '#ffffff' }
}
},
};
},
provide: {
chart: [ColumnSeries, Category, DataLabel, Tooltip, Legend]
},
mounted(){
// this.$refs.lineInstance.height ="100%";
// this.$refs.lineInstance.width ="100%";
}
};
</script>
<style>
#container{
height: 100%;
width:100%;
}
#line {
height: inherit !important;
width: inherit !important;
}
</style>
SIGN IN To post a reply.
1 Reply
Hi Sahan,
Greetings from Syncfusion.
We have validated your reported scenario with attached snippet and screenshot. We request you to inherit parent element height and width for chart to render based on its container. We have prepared sample based on your requirement. Please check with below snippet and sample.
|
<script>
mounted() {
this.$refs.columnInstance.height = "100%";
this.$refs.columnInstance.width = "100%";
}
</script>
<style>
.chart-content {
height: 100%;
width: 100%;
}
#container1, #container2, #container3 {
height: inherit !important;
width: inherit !important;
}
</style> |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartsInLayout-358945603.zip
Kindly revert us if you have any concerns.
Regards,
Durga G
SIGN IN To post a reply.
