app.component.html

<div id="chart-demo">
  <dx-chart [dataSource]="monthWeather" [customizePoint]="customizePoint">
    <dxo-chart-title
      text="Temperature in Seattle: October 2025"
    ></dxo-chart-title>
    <dxo-chart-size [height]="420"></dxo-chart-size>
    <dxi-chart-series
      argumentField="day"
      valueField="t"
      type="bar"
    ></dxi-chart-series>
    <dxo-chart-legend [visible]="false"></dxo-chart-legend>
    <dxo-chart-export [enabled]="true"></dxo-chart-export>
    <dxi-chart-value-axis>
      <dxo-chart-label [customizeText]="customizeText"></dxo-chart-label>
    </dxi-chart-value-axis>
    <dxo-chart-loading-indicator [enabled]="true"></dxo-chart-loading-indicator>
  </dx-chart>
  <div class="action">
    <div class="label">Choose a temperature threshold, &deg;C: </div>
    <dx-select-box
      id="choose-temperature"
      [dataSource]="temperature"
      [value]="2"
      (onValueChanged)="onValueChanged($event)"
      [inputAttr]="{ 'aria-label': 'Temperature' }"
    ></dx-select-box>
  </div>
</div>