Skip to main content
K
krishnakomal12315-Moonstone
15-Moonstone
October 21, 2024
Solved

Is it possible to get dual x-axis for column chart (Bar chart/column)

  • October 21, 2024
  • 4 replies
  • 2387 views

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

 

Best answer by Constantine

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.

4 replies

S
Surya_Tiwari16-Pearl
16-Pearl
October 22, 2024

Hi @krishnakomal123  Use SecondYAxis property in the property tab.

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
October 22, 2024

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?

S
suverma14-Alexandrite
14-Alexandrite
October 22, 2024

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

 

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
October 22, 2024

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

C
Constantine18-Opal
18-Opal
October 22, 2024

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

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
October 23, 2024

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?

C
Constantine18-OpalAnswer
18-Opal
October 23, 2024

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.

A
abandal12-Amethyst
12-Amethyst
November 11, 2024

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

Terms & ConditionsCookie settingsAccessibility statement