AmCharts: Disable Toggling Of Some Items In Legend

I'm using a series' tooltip for showing all the series values of a chart in the same tooltip. series1.tooltipText= '[bold]{dateX}[/]\\nSeries1Label: {series1}\\nSeries2Label: {seri

Solution 1:

You could add hit event listener on the legend container.

EDIT: Added hidden event inside hit event. Now Marketing legend will always show even the legend below is clicked to toggle (switching off the event after show so events don't pile up), consider the following:

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dataviz);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}
, {
  "country": "Republic",
  //"research": 301.9,
  "marketing": 222,
  "sales": 251
}
];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;


var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Expenditure (M)";

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "research";
series.dataFields.categoryY = "country";
series.name = "Research";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;
series.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "marketing";
series2.dataFields.categoryY = "country";
series2.name = "Marketing";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series2.stacked = true;
series2.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series2.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series2.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series2.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "sales";
series3.dataFields.categoryY = "country";
series3.name = "Sales";
series3.tooltipText = "{name}: [bold]{valueY}[/]";
series3.stacked = true;
series3.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series3.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series3.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series3.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

// Add cursor
chart.cursor = new am4charts.XYCursor();

function cornerRadius(radius, item) {
	var dataItem = item.dataItem;
	// Find the last series in this stack
	var lastSeries;
	// console.log(chart.series)
	chart.series.each(function(series) {
		if (dataItem.dataContext[series.dataFields.valueX] && !series.isHidden && !series.isHiding) {
			lastSeries = series;
		}
	});
	// If current series is the one, use rounded corner
	dataItem.component == lastSeries ? 100 : radius;
	// console.log(dataItem)
	return dataItem.component == lastSeries ? 10 : radius;
}

function cornerRadius1(radius, item) {
	var dataItem = item.dataItem;
	var lastSeries;
  var flag = false;
	chart.series.each(function(series) {
		if (dataItem.dataContext[series.dataFields.valueX] && !series.isHidden && !series.isHiding && !flag) {
			lastSeries = series;
      flag = true;
		}
	});
  	dataItem.component == lastSeries ? 100 : radius;
	return dataItem.component == lastSeries ? 10 : radius;
}
chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.events.on("hit", function(ev) {
    series2.events.on("hidden", function() {
        series2.show();
        series2.events.off("hidden");
    });
//console.log("Clicked on "+ ev.target.dataItem.name);
});

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 9pt;
}

#chartdiv {
  width: 100%;
  height: 401px;
}

<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/dataviz.js"></script>
<body>
<div id="chartdiv"></div>
</body>