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

[krishnakomal123]

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

[Surya_Tiwari]

Hi @krishnakomal123  Use SecondYAxis property in the property tab.

[krishnakomal123]

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?

[suverma]

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.

[krishnakomal123]

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

[Constantine]

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

[krishnakomal123]

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?

[Constantine · Accepted solution]

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.

[abandal]

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