Title bottom space too large and hidden value
Hi
I have the following code
<ejs-chart
:title="theTitle" background="transparent"
:primaryYAxis="false" //y axis is invisible
>
<e-series-collection>
<e-series
:dataSource="dataSeries" type="StackingColumn"
xName="x"
yName="y1"
name="data1"
>e-series>
<e-series
:dataSource="dataSeries" type="StackingColumn"
xName="x"
yName="y2"
name="data2"
>e-series>
e-series-collection>
ejs-chart>
The result is the following
Do I have control over the space below the title?
What about the hidden value? I guess it should be drawn "outer", no?
Thanks
SIGN IN To post a reply.
6 Replies
Hi Amos,
Please find the response for chart related queries.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Query #1: Do I have control over the space below the title?
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using the annotation property in the chart. We have prepared a sample for your reference. Please find the sample, code snippet, and screenshot for your reference.
Code Snippet:
|
<template>
<div class="control-section">
<div align='center'>
<ejs-chart :annotations='annotations'> // add additional code here
</ejs-chart>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { Browser } from '@syncfusion/ej2-base';
import { ChartPlugin, StackingColumnSeries, ChartAnnotation, DataLabel, Legend, Category, Tooltip} from "@syncfusion/ej2-vue-charts";
let contentVue = Vue.component("contentTemplate", {
template: '<div id="text">Chart Title</div>',
data() {
return {
data: {}
};
}
});
let contentTemplate = function() {
return { template: contentVue };
};
Vue.use(ChartPlugin);
let selectedTheme = location.hash.split("/")[1];
selectedTheme = selectedTheme ? selectedTheme : "Material";
let theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark");
export default Vue.extend({
data: function() {
return { // add additional code here
annotations:[{
content: contentTemplate,
coordinateUnits: 'Pixel',
x: '50%',
y: 10,
region: 'Chart'
}],
};
},
provide: {
chart: [StackingColumnSeries, Legend, ChartAnnotation, Category, DataLabel, Tooltip]
},
}); </script>
|
Screenshot:
Query #2: What about the hidden value? I guess it should be drawn "outer", no?
We have analyzed your query. From that, we can overcome the reported scenario using the minimum property in the axis of the chart. We have prepared a sample for your reference. Please find the sample, code snippet, and screenshot for your reference.
Code Snippet:
|
// add additional code here
{
title: 'Sales',
lineStyle: { width: 0 },
minimum: -100,
maximum: 350,
interval: 100,
majorTickLines: { width: 0 },
majorGridLines: { width: 1 },
minorGridLines: { width: 1 },
minorTickLines: { width: 0 },
labelFormat: '{value}B', },// add additional code here |
Screenshot:
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Let us know if you have any concerns.
Regards,
Srihari M
I set it to minimum: -20 so there won't be much spacing below because it doesn't look good and here is the result
The left example looks ok (I admit that I don't like the spacing) but in general the view makes sense.
The right example, don't makes sense in any way. I guess the ratio of -20 for the relevant values makes it look bad.
You understand that (really) solving the spacing between the title and the chart (meaning making it less spacey without using annotations) will solve both problems because then it will have more room for the values to be drawn. As you saw in my previous screenshot, the space is there but it's not used for anything...
I removed the minimum property from the yaxis settings and continued working on my things when suddenly I noticed this
As you can see, the above looks perfect and the lower number is drawn outside so it looks like, that in certain ratios/numbers, the drawing is done correctly.
I know there's another feature request to allow drawing "outside" in case of stackingcolumns (should be implemented later on) but it looks like you're already half way there :)
SIGN IN To post a reply.
