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 instancevar 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 axesvar 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 seriesvar 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();

functioncornerRadius(radius, item) {
	var dataItem = item.dataItem;
	// Find the last series in this stackvar 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;
}

functioncornerRadius1(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;
}

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