apply filters to power bi report using power bi javascript api

I'm applying custom  filters for power bi report  using some javascript code. but filters are not applying . Im getting powerbi report on browser without any filter.

I'm following Javascript code here :

below one is sample code which iam using .

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () {
    var models = window['powerbi-client'].models;
const basicFilter  = {
  $schema: "http://powerbi.com/product/schema#basic",
  target: {
    table: "TableName",
    column: "ColumnName"
  },
  operator: "In",
  values: ["Jr.Software"],
  filterType: models.FilterType.Basic,
  requireSingleSelection: true
}
var embedConfiguration = {
    type: 'report',
tokenType: models.TokenType.Embed,
    id: reportId,
    accessToken: '{myToken}',
    embedUrl: 'https://app.powerbi.com/view?{-------}&pageName=ReportSection',
 permissions: models.Permissions.All,
		filters:[basicFilter],
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true
        }
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);
report.updateFilters(models.FiltersOperations.Add,[basicFilter])
}
</script>

<div id="reportContainer"></div>
 

i need render power bi report with filters below like:

pls can anyone suggest where i have done mistake in above javascript code .
could you please provide any links .

thanks 
Goutham pamula