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>
    <li ng-class="{active: currentTab == 'colors'}" ng-if="options.globalSeriesType != 'custom'">
      <a ng-click="changeTab('colors')">Colors</a>
    </li>
    <li ng-class="{active: currentTab == 'dataLabels'}" ng-if="options.globalSeriesType != 'custom'">
      <a ng-click="changeTab('dataLabels')">Data Labels</a>
    </li>
  </ul>
  <div ng-if="currentTab == 'general'" class="m-t-10 m-b-10">
    <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 }}</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 ng-if="['line', 'area', 'column'].indexOf(options.globalSeriesType) >= 0" class="checkbox">
        <label class="control-label">
          <input type="checkbox" ng-model="options.series.percentValues"> Normalize values to percentage
        </label>
      </div>
    </div>
  </div>

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

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

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.autoRedraw">
        <i class="input-helper"></i> Auto update graph
      </label>
    </div>
  </div>

  <div ng-if="currentTab == 'xAxis'" class="m-t-10 m-b-10">
    <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.label}}</ui-select-match>
        <ui-select-choices repeat="scaleType.value as scaleType in xAxisScales">
          <div ng-bind-html="scaleType.label | 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">
    </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-if="currentTab == 'yAxis'" class="m-t-10 m-b-10">
    <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">
      </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">
      </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">
      </div>
    </div>
  </div>

  <div ng-if="currentTab == 'series'" class="m-t-10 m-b-10">
    <table class="table table-condensed col-table">
      <thead>
        <th style="width: 1%;">zIndex</th>
        <th ng-if="options.globalSeriesType != 'pie'">Left Y Axis</th>
        <th ng-if="options.globalSeriesType != 'pie'">Right Y Axis</th>
        <th>Label</th>
        <th ng-if="options.globalSeriesType != 'pie'">Type</th>
      </thead>
      <tbody ui-sortable ng-model="form.seriesList">
        <tr ng-repeat="name in form.seriesList">
          <td style="width: 1%; cursor: move;">
            <i class="fa fa-arrows-v"></i>
            <span ng-bind="options.seriesOptions[name].zIndex + 1"></span>
          </td>
          <td ng-if="options.globalSeriesType != 'pie'">
            <input type="radio" ng-value="0" ng-model="options.seriesOptions[name].yAxis">
          </td>
          <td ng-if="options.globalSeriesType != 'pie'">
            <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 ng-if="options.globalSeriesType != 'pie'" 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>

  <div ng-if="(currentTab == 'colors') && (options.globalSeriesType != 'pie')" class="m-t-10 m-b-10">
    <table class="table table-condensed col-table">
      <tbody>
      <tr ng-repeat="name in form.seriesList">
        <td style="padding: 3px; width: 140px;">
          <div>{{ name }}</div>
        </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>
      </tr>
      </tbody>
    </table>
  </div>

  <div ng-if="(currentTab == 'colors') && (options.globalSeriesType == 'pie')" class="m-t-10 m-b-10">
    <table class="table table-condensed col-table">
      <tbody>
      <tr ng-repeat="name in form.valuesList">
        <td style="padding: 3px; width: 140px;">
          <div>{{ name }}</div>
        </td>
        <td style="padding: 3px; width: 35px;">
          <ui-select ng-model="options.valuesOptions[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>
      </tr>
      </tbody>
    </table>
  </div>

  <div ng-if="currentTab == 'dataLabels'" class="m-t-10 m-b-10">
    <div ng-if="['line', 'area', 'column', 'scatter', 'pie'].indexOf(options.globalSeriesType) >= 0" class="checkbox">
      <label>
        <input type="checkbox" ng-model="options.showDataLabels"> Show Data Labels</label>
    </div>

    <div class="form-group">
      <label for="chart-editor-number-format">
        Number Values Format
        <span class="m-l-5" uib-popover-html="'Format <a href=&quot;http://numeraljs.com/&quot; target=&quot;_blank&quot;>specs.</a>'"
          popover-trigger="'click outsideClick'">
          <i class="fa fa-question-circle"></i>
        </span>
      </label>
      <input class="form-control" ng-model="options.numberFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }" id="chart-editor-number-format">
    </div>

    <div class="form-group">
      <label for="chart-editor-percent-format">
        Percent Values Format
        <span class="m-l-5" uib-popover-html="'Format <a href=&quot;http://numeraljs.com/&quot; target=&quot;_blank&quot;>specs.</a>'"
          popover-trigger="'click outsideClick'">
          <i class="fa fa-question-circle"></i>
        </span>
      </label>
      <input class="form-control" ng-model="options.percentFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }" id="chart-editor-percent-format">
    </div>

    <div class="form-group">
      <label for="chart-editor-datetime-format">
        Date/Time Values Format
        <span class="m-l-5" uib-popover-html="'Format <a href=&quot;https://momentjs.com/docs/#/displaying/format/&quot; target=&quot;_blank&quot;>specs.</a>'"
          popover-trigger="'click outsideClick'">
          <i class="fa fa-question-circle"></i>
        </span>
      </label>
      <input class="form-control" ng-model="options.dateTimeFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }" id="chart-editor-datetime-format">
    </div>

    <div class="form-group">
      <label for="chart-editor-text">
        Data Labels
        <i class="fa fa-question-circle m-l-5" uib-popover-html="templateHint" popover-trigger="'click outsideClick'" popover-placement="top-left"></i>
      </label>
      <input class="form-control" ng-model="options.textFormat" ng-model-options="{ allowInvalid: true, debounce: 200 }" id="chart-editor-text"
        placeholder="(auto)">
    </div>
  </div>
</div>