redash/client/app/visualizations/chart/chart-editor.html

<div>
  <ul class="tab-nav">
    <li ng-class="{active: currentTab == 'general'}">
      <a ng-click="changeTab('general')">General</a>
    </li>
    <li ng-class="{active: currentTab == 'xAxis'}" ng-if="options.globalSeriesType != 'custom'">
      <a ng-click="changeTab('xAxis')">X Axis</a>
    </li>
    <li ng-class="{active: currentTab == 'yAxis'}" ng-if="options.globalSeriesType != 'custom'">
      <a ng-click="changeTab('yAxis')">Y Axis</a>
    </li>
    <li ng-class="{active: currentTab == 'series'}" ng-if="options.globalSeriesType != 'custom'">
      <a ng-click="changeTab('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...">
            <div>
              <i class="fa fa-{{$select.selected.value.icon}}"></i>
              {{$select.selected.value.name}}
            </div>
          </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" ng-if="options.globalSeriesType != 'custom'">
      <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="form-group" ng-if="showSizeColumnPicker()">
      <label class="control-label">Bubble size column</label>

      <ui-select name="sizeColumn" ng-model="form.sizeColumn">
        <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.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 class="form-group" ng-if="options.globalSeriesType != 'custom'">
      <label class="control-label">Errors column</label>

      <ui-select name="errorColumn" ng-model="form.errorColumn">
        <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.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 class="checkbox" ng-if="options.globalSeriesType != 'custom'">
      <label>
        <input type="checkbox" ng-model="options.legend.enabled">
        <i class="input-helper"></i> Show Legend
      </label>
    </div>

    <div class="checkbox" ng-if="options.globalSeriesType == 'box'">
      <label>
        <input type="checkbox" ng-model="options.showpoints">
        <i class="input-helper"></i> Show All Points
      </label>
    </div>

    <div class="form-group" ng-if="options.globalSeriesType != 'custom'">
      <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" ng-if="options.globalSeriesType == 'box'">
      <label>
        <label class="control-label">Graph Height</label>
        <input name="graph-height" type="number" class="form-control" ng-model="options.height">
      </label>
    </div>
  </div>

  <div class="form-group" ng-if="options.globalSeriesType == 'custom'">
    <label class="control-label">Custom code</label>
    <textarea ng-model="options.customCode" class="form-control v-resizable" rows="10">
    </textarea>
  </div>

  <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
    <label>
      <input type="checkbox" ng-model="options.enableConsoleLogs">
      <i class="input-helper"></i> Show errors in the console
    </label>
  </div>

  <div class="checkbox" ng-if="options.globalSeriesType == 'custom'">
    <label>
      <input type="checkbox" ng-model="options.autoRedraw">
      <i class="input-helper"></i> Auto update graph
    </label>
  </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 class="form-group">
      <label class="control-label">Height</label>
      <input name="x-axis-height" type="number" class="form-control" ng-model="options.bottomMargin">
    </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 class="form-group">
        <label class="control-label">Min Value</label>
        <input ng-model="yAxis.rangeMin" type="number" step="any" placeholder="Auto" class="form-control"></input>
      </div>
      <div class="form-group">
        <label class="control-label">Max Value</label>
        <input ng-model="yAxis.rangeMax" type="number" step="any" placeholder="Auto" 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">
              <div>
                <i class="fa fa-{{$select.selected.value.icon}}"></i>
                {{$select.selected.value.name}}
              </div>
            </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>