redash/rd_ui/app/views/visualizations/chart_editor.html

<div>
  <ul class="tab-nav">
    <li ng-class="{active: currentTab == 'general'}"><a ng-click="currentTab='general'">General</a></li>
    <li ng-class="{active: currentTab == 'xAxis'}"><a ng-click="currentTab='xAxis'">X Axis</a></li>
    <li ng-class="{active: currentTab == 'yAxis'}"><a ng-click="currentTab='yAxis'">Y Axis</a></li>
    <li ng-class="{active: currentTab == 'series'}"><a ng-click="currentTab='series'">Series</a></li>
  </ul>
  <div ng-show="currentTab == 'general'">
    <div class="form-group">
      <label class="control-label">Chart Type</label>
      <div ng-if="chartTypes"><!--the if is a weird workaround-->
        <ui-select ng-model="options.globalSeriesType" on-select="chartTypeChanged()">
          <ui-select-match placeholder="Choose chart type..."><i class="fa fa-{{$select.selected.value.icon}}"></i>
            {{$select.selected.value.name}}
          </ui-select-match>
          <ui-select-choices repeat="info.chartType as (chartType, info) in chartTypes">
            <div><i class="fa fa-{{info.value.icon}}"></i><span> </span><span
              ng-bind-html="info.value.name | highlight: $select.search"></span></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>


    <div class="form-group" ng-class="{'has-error': chartEditor.xAxisColumn.$invalid}">
      <label class="control-label">X Column</label>

      <ui-select name="xAxisColumn" required ng-model="form.xAxisColumn">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in columnNames | remove:form.yAxisColumns | remove:form.groupby">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <!-- not using regular validation (chartEditor.yAxisColumns.$invalid) due to a bug in ui-select with multiple choices-->
    <div class="form-group" ng-class="{'has-error': !form.yAxisColumns || form.yAxisColumns.length == 0}">
      <label class="control-label">Y Columns</label>

      <ui-select multiple name="yAxisColumns" required ng-model="form.yAxisColumns">
        <ui-select-match placeholder="Choose columns...">{{$item}}</ui-select-match>
        <ui-select-choices repeat="column in columnNames | remove:form.groupby | remove:form.xAxisColumn">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>

    </div>

    <div class="form-group">
      <label class="control-label">Group by</label>
      <ui-select name="groupby" ng-model="form.groupby" class="clearable">
        <ui-select-match allow-clear="true" placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in columnNames | remove:form.yAxisColumns | remove:form.xAxisColumn">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.legend.enabled">
        <i class="input-helper"></i> Show Legend
      </label>
    </div>

    <div class="form-group">
      <label class="control-label">Stacking</label>

      <div ng-if="stackingOptions"><!--the if is a weird workaround-->
        <ui-select ng-model="options.series.stacking"
                   ng-disabled="['line', 'area', 'column'].indexOf(options.globalSeriesType) == -1">
          <ui-select-match placeholder="Choose Stacking...">{{$select.selected.key | capitalize}}</ui-select-match>
          <ui-select-choices repeat="value.value as (key, value) in stackingOptions">
            <div ng-bind-html="value.key | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label">Bottom Margin</label>
      <input name="name" type="text" class="form-control" ng-model="options.bottomMargin">
    </div>
  </div>


  <div ng-show="currentTab == 'xAxis'">
    <div class="form-group">
      <label class="control-label">Scale</label>
      <ui-select ng-model="options.xAxis.type">
        <ui-select-match placeholder="Choose Scale...">{{$select.selected | capitalize}}</ui-select-match>
        <ui-select-choices repeat="scaleType in xAxisScales">
          <div ng-bind-html="scaleType | capitalize | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="form-group">
      <label class="control-label">Name</label>
      <input ng-model="options.xAxis.title.text" type="text" class="form-control"></input>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.sortX">
        <i class="input-helper"></i> Sort Values
      </label>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.xAxis.labels.enabled">
        <i class="input-helper"></i> Show Labels
      </label>
    </div>
  </div>

  <div ng-show="currentTab == 'yAxis'">
    <div ng-repeat="yAxis in options.yAxis">
      <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>

      <div class="form-group">
        <label class="control-label">Scale</label>
        <ui-select ng-model="yAxis.type">
          <ui-select-match placeholder="Choose Scale...">{{$select.selected | capitalize}}</ui-select-match>
          <ui-select-choices repeat="scaleType in yAxisScales">
            <div ng-bind-html="scaleType | capitalize | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
      </div>
      <div class="form-group">
        <label class="control-label">Name</label>
        <input ng-model="yAxis.title.text" type="text" class="form-control"></input>
      </div>
    </div>
  </div>

  <div ng-show="currentTab=='series'">
    <table class="table table-condensed col-table">
      <thead>
      <th>zIndex</th>
      <th>Left Y Axis</th>
      <th>Right Y Axis</th>
      <th>Label</th>
      <th>Color</th>
      <th>Type</th>
      </thead>
      <tbody ui-sortable ng-model="form.seriesList">
      <tr ng-repeat="name in form.seriesList">
        <td style="cursor: move;"><i class="fa fa-arrows-v"></i> <span
          ng-bind="options.seriesOptions[name].zIndex + 1"></span></td>
        <td>
          <input type="radio" ng-value="0" ng-model="options.seriesOptions[name].yAxis">
        </td>
        <td>
          <input type="radio" ng-value="1" ng-model="options.seriesOptions[name].yAxis">
        </td>
        <td style="padding: 3px; width: 140px;">
          <input placeholder="{{name}}" class="form-control input-sm super-small-input" type="text"
                 ng-model="options.seriesOptions[name].name">
        </td>
        <td style="padding: 3px; width: 35px;">
          <ui-select ng-model="options.seriesOptions[name].color">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </td>
        <td style="padding: 3px; width: 105px;">
          <ui-select ng-model="options.seriesOptions[name].type">
            <ui-select-match placeholder="Chart Type"><i class="fa fa-{{$select.selected.value.icon}}"></i>
              {{$select.selected.value.name}}
            </ui-select-match>
            <ui-select-choices repeat="info.chartType as (chartType, info) in chartTypes">
              <div><i class="fa fa-{{info.value.icon}}"></i><span> </span><span
                ng-bind-html="info.value.name | highlight: $select.search"></span></div>
            </ui-select-choices>
          </ui-select>
        </td>
      </tr>
      </tbody>
    </table>
  </div>