Is it possible to get dual x-axis for column chart (Bar chart/column)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
Is it possible to get dual x-axis for column chart (Bar chart/column)
Is it possible to get dual x-axis for column chart. Both x-axis are to be one above other like below image.
I have tried with "\n" character in code but it is taking as space.Anything I am missing out here.Please help me on this.Thanks
Solved! Go to Solution.
- Labels:
-
Mashup-Widget
- Tags:
- development
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
Make sure you still return "\n" from your service. If it is the case, then the issue must be related to your mashup structure. Start checking it step by step, i.e. execute this in your DevTools console:
document.querySelector('ptcs-chart-bar')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis').shadowRoot.querySelectorAll('ptcs-label')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis').shadowRoot.querySelectorAll('ptcs-label').forEach(label => {
console.log(label);
});
Also, those selectors act on the first chart in the mashup only. If you have more than one chart, it may work unexpectedly. Basically, troubleshoot it step by step, comparing it to the DOM you see in DevTools > Inspect.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
The chart should look as per image above.By using second y axis,firstly it will be y-axis on the right and it will be not be below x-axis.Any other way to get this done?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
Hi @krishnakomal123 You need to check the field MultipleDataSources property of your Chart Widget and then you will be able to define more than one x-axis fields.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
After using Multiple datasources, the chart got divided into two charts and showing like below which is not as per chart image I shared above
Please let me know how to acheive the same
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
If you find a way to run this snippet after your mashup loads (e.g. in a custom mini-widget, or via unsafe expressions), it will display the labels with "\n" in them as expected. You can try it in DevTools console.
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis').shadowRoot.querySelectorAll('ptcs-label').forEach(label => {
label.style['max-height'] = null;
label.shadowRoot.querySelector('#label').style = 'white-space: pre';
});
But for the love of god, please don't.
/ Constantine
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
I tried the same as per the image on Dev tools console. But nothing is changed on UI.Can you please let me know where it is going wrong?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
Make sure you still return "\n" from your service. If it is the case, then the issue must be related to your mashup structure. Start checking it step by step, i.e. execute this in your DevTools console:
document.querySelector('ptcs-chart-bar')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis').shadowRoot.querySelectorAll('ptcs-label')
document.querySelector('ptcs-chart-bar').shadowRoot.querySelector('ptcs-chart-axis').shadowRoot.querySelectorAll('ptcs-label').forEach(label => {
console.log(label);
});
Also, those selectors act on the first chart in the mashup only. If you have more than one chart, it may work unexpectedly. Basically, troubleshoot it step by step, comparing it to the DOM you see in DevTools > Inspect.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Notify Moderator
Hi @krishnakomal123 ,
It appears that a response to this post answers your question. For the benefit of other Community Members who may have the same question, it would be great if you could designate it as the Accepted Solution.
In the event that a response did not answer your question, please post your current status so that we can continue to support.
Thanks for using the PTC Community!
Regards,
Abhi
