[CLOSED] Transparency of colors in PieChart but not in legend

[HansWapenaar]

Hi,

I have put a transparency on colors used in a piechart.
That is done through the style of the series.

 
<Series>
   <ext:PieSeries
     AngleField="Data1"
     ShowInLegend="true"  
     Donut="20" 
     Highlight="true" 
     HighlightSegmentMargin="10"> 
     <Style Opacity="0.6" StrokeWidth="1" Stroke="#666"   />
   </ext:PieSeries>
</Series>

Transparency works good in the chart, but is not shown in the legend. I can not find any option for setting the transparency of the colors in the legend. Any idea?

Hans

[Baidaly]

Hello!

I'm afraid that there is no such functionality but I think there were some reasons. However, you can try the following:

Add config to LegendConfig

<LegendConfig Position="Right">
	<CustomConfig>
		<ext:ConfigItem Name="opacity" Value="0.5" Mode="Raw" />
	</CustomConfig>
</LegendConfig>

Override default legend rendering:

<script>
	Ext.override(Ext.chart.LegendItem, {
		createLabel: function (config) {
			var me = this,
			legend = me.legend;
			return me.add('label', me.surface.add({
				type: 'text',
				x: 20,
				y: 0,
				zIndex: (me.zIndex || 0) + 2,
				fill: legend.labelColor,
				font: legend.labelFont,
				text: me.getLabelText(),
				opacity: legend.opacity,
				style: {
					cursor: 'pointer'
				}
			}));
		},

		drawMarker: function (x, y, z, markerConfig) {
			var me = this,
				surface = me.surface,
				series = me.series;
			return me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
				fill: markerConfig.fill,
				x: x,
				y: y,
				zIndex: (z || 0) + 2,
				opacity: this.legend.opacity,
				radius: markerConfig.radius || markerConfig.size,
				style: {
					cursor: 'pointer'
				}
			}));
		},
		drawFilledBox: function (width, height, z, index) {
			var me = this,
				surface = me.surface,
				series = me.series;
			return me.add('box', surface.add({
				type: 'rect',
				zIndex: (z || 0) + 2,
				opacity: this.legend.opacity,
				x: 0,
				y: 0,
				width: width,
				height: height,
				fill: series.getLegendColor(index),
				style: {
					cursor: 'pointer'
				}
			}));
		} 
	});
</script>

[HansWapenaar]

Hi Baidaly,

I tried it and it certainly works. Only minor change: also the text gets the transparency, but putting 'opacity:1' in CreateLabel in stead of 'opacity: legend.opacity' makes the text normal again.

So thanks a lot.
Hans