nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Toggling Data Label Visibility (Client Side)

SChu

I have implemented a script which reverses the default show/hide functionality of the legend (see below) to hide all except the selected entry. Unfortunately I am having trouble with the other part of my desired functionality, showing/hiding the data labels on the same event (Due to an issue with the relative sizes of the stacked bar elements involved here, if data labels are on all of the time the chart becomes illegible) 
 
This part in the page:
<blockquote class="ipsBlockquote">
<script type="text/javascript"> 
var lastSeries = ""; 
function SeriesToggle(thisVal, thisSeries, bookmark) 
{ 
debugger; 
 var bpagecontents = thisVal.getCurrentPageContent( ); 
 var bchart = bpagecontents.getChartByBookmark(bookmark); 
 var series = bchart.getClientChart()._chart.series; 
 for(i = 0; i < series.length; i++) 
 { 
 if(lastSeries != "" && lastSeries == thisSeries) 
 { 
 bchart.getClientChart( ).setSeriesVisible(series.name, true); 
 } 
 else if(thisSeries != series.name && series.visible) 
 { 
 bchart.getClientChart( ).setSeriesVisible(series.name, false); 
 } 
 else if(thisSeries == series.name) 
 { 
 bchart.getClientChart( ).setSeriesVisible(series.name, true); 
 } 
 } 
 if(lastSeries == thisSeries) 
 { 
 lastSeries = ""; 
 } 
 else 
 { 
 lastSeries = thisSeries; 
 } 
} 
</script>
</blockquote>
 
This part in the chart as a script invoked upon click events:
<blockquote class="ipsBlockquote">
SeriesToggle( actuate.getViewer("NavigationBar") ,evt.currentTarget.name, "CHART01103");
</blockquote>
 
Does anyone know how I can show/hide those labels? All of the results when I google are from 2006-2009 and are discussions of eclipse BIRT functionality where showing/hiding these labels on a click event was a chart creation pull-down menu option.

Find more posts tagged with

Comments

JFreeman

From what I have been able to figure out, it looks like there is a server side setting for the data labels visibility that takes precedence over the client side high charts visibility settings:
<pre class="_prettyXprint _lang-js">
function beforeDataSetFilled( series, idsp, icsc )
{
series.getLabel().setVisible(true);
}
</pre>
Therefore, hooking the chart client side like you are doesn't appear to allow for changes to this visibility. You can hook the visibility client side like this "series.options.dataLabels.enabled" but from what I can tell there isn't a way to apply changes that will actually take effect.
 
However, I have been able to set the visibility to hidden in the CSS properties of the element client side by hooking it from within the DOM tree:
<pre class="_prettyXprint _lang-">
var child = document.getElementsByClassName("highcharts-data-labels highcharts-tracker");
child[0].setAttribute('style','visibility:hidden');
</pre>
This isn't the most elegant solution but it did work in my testing. Please note, if the data labels are set to be off when the chart is rendered the DOM element wont be created so this CSS change wont work. But, if the data labels are all turned on to start with you should be able to set all the required series to hidden then back to visible as needed.