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

<form class="form-horizontal" name="chartEditor">

  <div class="row">
    <div class="col-md-6">
      <div class="form-group row">

        <label class="control-label col-sm-5">Chart Type</label>
        <div class="col-sm-7" 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>

    <div class="col-md-6">
      <div class="form-group row">

        <label class="control-label col-sm-5">Stacking</label>

        <div class="col-sm-7" 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>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="form-group row" ng-class="{'has-error': chartEditor.xAxisColumn.$invalid}">

        <label class="control-label col-sm-5">X Column</label>

        <div class="col-sm-7">
          <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>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group row">

        <label class="control-label col-sm-5">Group by</label>

        <div class="col-sm-7">

          <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>
    </div>
  </div>

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

        <label class="control-label col-sm-5">Y Columns</label>

        <div class="col-sm-7">

          <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>
    </div>
    <div class="col-md-6">
      <div class="form-group row">

        <label class="control-label col-sm-5">Legend</label>

        <div class="col-sm-7">
          <input type="checkbox" ng-model="options.legend.enabled">
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-heading">
          <h3 class="panel-title">X Axis</h3>
        </div>

        <div class="panel-body">
          <div class="row">

            <div class="col-md-6">
              <div class="form-group row">
                <label class="control-label col-sm-3">Scale</label>
                <div class="col-sm-9">
                  <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>
            </div>

            <div class="col-md-6">
              <div class="form-group row">
                <label class="control-label col-sm-8">Sort Values</label>
                <div class="col-sm-4">
                  <input type="checkbox" ng-model="options.sortX">
                </div>
              </div>
            </div>

          </div>
          <div class="row">

            <div class="col-md-6">
              <div class="form-group row">
                <label class="control-label col-sm-3">Name</label>
                <div class="col-sm-9">
                  <input ng-model="options.xAxis.title.text" type="text" class="form-control"></input>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="form-group row">
                <label class="control-label col-sm-8">Show Labels</label>
                <div class="col-sm-4">
                  <input type="checkbox" ng-model="options.xAxis.labels.enabled">
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div ng-repeat="yAxis in options.yAxis" class="col-md-3">
      <div class="panel panel-default">

        <div class="panel-heading">
          <h3 class="panel-title">{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h3>
        </div>

        <div class="panel-body">
          <div class="form-group row">
            <label class="control-label col-sm-3">Scale</label>
            <div class="col-sm-9">
              <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>
          <div class="form-group row">
            <label class="control-label col-sm-3">Name</label>
            <div class="col-sm-9">
              <input ng-model="yAxis.title.text" type="text" class="form-control"></input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">

<div class="panel panel-default">

  <div class="panel-heading"><h3 class="panel-title">Series Options</h3></div>

  <div>
    <table class="table table-condensed col-table">
      <thead>
        <th>zIndex</th>
        <th>Column</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>{{name}}</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>
</div>

</form>