Need to summarize a dynamic xpath - selenium

Question

I have a far too large dynamic xpath and would like to know if there is a shortened version that can be used. This is for a legend to a chart object, "Campaign Response" (which cannot be found by contains(text(), as it is embedded within the chart and isn't recognized as a string.) There are 4 locations of "Campaign Response" at different locations on different charts on the same screen.
I've tried using dynamic (//) body//section//div etc, and tend to wind up with something that grabs multiple objects.
//body[contains(#class,'desktop')]
/div[contains(#class,'desktop container forceStyle oneOne
lafStandardLayoutContainer lafAppLayoutHost forceAccess forceStyle
oneOne')]
/div[contains(#class,'viewport')]
/section[contains(#class,'stage panelSlide hasFixedFooter')]
/div[#id='brandBand_1']
/div[contains(#class,'slds-template__container')]
/div[contains(#class,'center oneCenterStage lafSinglePaneWindowManager')]
/div[contains(#class,'windowViewMode-normal oneContent active lafPageHost')]
/div[contains(#class,'container homeLanding')]
/div[contains(#class,'flexipagePage')]
/div[contains(#class,'responsiveContents homeDesktopTemplate')]
/div[contains(#class,'colMain')]
/div[contains(#class,'bottomWrapper')]
/div[contains(#class,'bottomLeft')]
/div[4]
/article[1]
/div[2]
/div[1]
/div[1]
/div[1]
/div[1]
/div[2]
/div[1]
/div[2]
/div[1]
/div[1]
html snippet - DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" is what is highlighted when looking at the code.
<div class="loadingPanel" data-aura-rendered-by="27:812;a"></div><span class="loadingMsg" data-aura-rendered-by="28:812;a">Loading report chart...</span></div>
<!--render facet: 75:812;a-->
<!--render facet: 82:812;a-->
<!--render facet: 96:812;a-->
<div class="eclair-component-container reportsEclairChart" data-aura-rendered-by="106:812;a" data-aura-class="reportsEclairChart" style="">
<div class="eclair-component-chart" data-aura-rendered-by="107:812;a" data-ngname="chart_0" style="width: 464.609px;">
<div style="position: relative;">
<div style="z-index: 2; position: absolute; overflow: hidden; background-color: rgba(255, 255, 255, 0); width: 464.609px; height: 300px; left: 0px; top: 0px;" class="ps-container" data-ps-id="aee85f92-8bd4-9aeb-b095-68aac4a00821">
<div style="width: 465px; height: 300px;"></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="chart" style="z-index: 1; position: absolute; -webkit-font-smoothing: antialiased; width: 464.609px; height: 300px; left: 0px; top: 0px;" width="464" height="300"></canvas>
<button aria-live="polite" class="reportsEclairChart ng-button assistiveText">Enable Tab Navigation for This Chart<span class="assistiveText">Enable table equivalent for screen reader users</span></button>
</div>
<div data-ngname="legend_chart_0" style="">
<div style="position: relative;">
<DIV CLASS="PS-CONTAINER" DATA-PS-ID="70C963EF-4CA2-07A3-6B48-394D11135709" STYLE="">
<div style=""></div>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" style="top: 0px; height: 0px;"></div>
</div>
</div>
<canvas class="legend" style="z-index: 2; position: absolute; -webkit-font-smoothing: antialiased; width: 124px; height: 88px; left: 338.609px; top: 2px;" width="124" height="88"></canvas>
</div>
</div>
<div class="ng-annotations-container" style="margin: 2px; width: 460.609px; height: 296px;"></div>
</div>
<div class="error-div hide" data-aura-rendered-by="108:812;a"></div><span class="eclair-component-alt-text" data-aura-rendered-by="109:812;a">Chart: Priority Campaigns by Response</span></div>
<!--render facet: 111:812;a-->
</div>
</div>
</div>
<div class="lightning" data-aura-rendered-by="113:812;a"><span class="reportFooter" data-aura-rendered-by="114:812;a"><button class="slds-button navigateButton uiButton" aria-live="off" type="button" data-aura-rendered-by="118:812;a" data-aura-class="uiButton"><!--render facet: 119:812;a--><span class=" label bBody" dir="ltr" data-aura-rendered-by="121:812;a">View Report</span>
<!--render facet: 123:812;a-->
</button>
<div class="refreshContainer" data-aura-rendered-by="125:812;a"><span class="asOfDate" data-aura-rendered-by="128:812;a">As of Today at 10:​33 AM</span>
<button class="slds-button refreshButton uiButton" aria-live="off" type="button" data-aura-rendered-by="137:812;a" data-aura-class="uiButton">
<!--render facet: 138:812;a--><span class="assistiveText" data-aura-rendered-by="141:812;a">Refresh</span>
<lightning-icon class="slds-icon-utility-refresh slds-icon_container" data-data-rendering-service-uid="393" data-aura-rendered-by="135:812;a">
<lightning-primitive-icon lightning-primitiveicon_primitiveicon-host="">
<svg lightning-primitiveIcon_primitiveIcon="" focusable="false" data-key="refresh" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_xx-small">
<use lightning-primitiveIcon_primitiveIcon="" xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg?cache=9.28.0#refresh"></use>
</svg>
</lightning-primitive-icon><span class="slds-assistive-text">Refresh</span></lightning-icon>
</button>
</div>
</span>
</div>

Answer 1

I presume you want to access the span tag contains Priority Campaigns by Response
Try following xpath:
//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
OR
//div[#data-aura-class='reportsEclairChart']//span[#class='eclair-component-alt-text'][contains(.,'Campaigns by Response')]
Edited
To access the canvas element try below xpath.
//div[#class='PS-CONTAINER']/following::canvas[#class='legend']