Skip to main content
krishnakomal12315-Moonstone
15-Moonstone
Oct 21, 2024 2:58 PM UTC
Solved

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.

 

krishnakomal123_0-1729522586057.png

 

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

 

ConstantineAnswer
18-Opal
Oct 23, 2024 10:52 AM UTC

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.

View in thread

8 replies

Surya_Tiwari16-Pearl
16-Pearl
Oct 22, 2024 1:33 AM UTC

Hi @krishnakomal123  Use SecondYAxis property in the property tab.

Translate
krishnakomal12315-MoonstoneAuthor
15-Moonstone
Oct 22, 2024 5:18 AM UTC

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?

Translate
suverma14-Alexandrite
14-Alexandrite
Oct 22, 2024 10:47 AM UTC

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.

 

suverma_0-1729593997638.png

 

Translate
krishnakomal12315-MoonstoneAuthor
15-Moonstone
Oct 22, 2024 11:37 AM UTC

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

 

krishnakomal123_0-1729597013653.png

Please let me know how to acheive the same

Translate
Constantine18-Opal
18-Opal
Oct 22, 2024 4:37 PM UTC

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';
});

 

 

Constantine_0-1729614958542.png

 

But for the love of god, please don't.

/ Constantine

Translate
krishnakomal12315-MoonstoneAuthor
15-Moonstone
Oct 23, 2024 10:49 AM UTC

krishnakomal123_0-1729680426850.png

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?

Translate
Constantine18-OpalAnswer
18-Opal
Oct 23, 2024 10:52 AM UTC

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.

Translate
abandalCommunity Manager
Support
Nov 11, 2024 7:01 PM UTC

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

Translate
Terms & ConditionsAccessibility statement