You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to generate a data-driven class breaks visualization based on a classification method used to classify data from a numeric field in a FeatureLayer.

This is accomplished with the createClassBreaksRenderer() method in the color renderer creator helper object. All that is required for generating a renderer is a Feature Layer and a field name.

const params = {
  layer: layer,
  field: "COL_DEG",
  normalizationField: "EDUCBASECY",
  classificationMethod: "quantile",
  numClasses: 4,
  legendOptions: {
    title: "% population with a college degree"

// generate the renderer and set it on the layer
colorRendererCreator.createClassBreaksRenderer(params).then(function(response) {
  layer.renderer = response.renderer;


You can also create a ClassedColorSlider to allow the user to create manual class breaks.

function updateColorSlider(rendererResult){
  // generate histogram for the slider
    layer: layer,
    field: "COL_DEG",
    normalizationField: "EDUCBASECY",
    numBins: 100
      const sliderContainer = document.createElement("div");
      const container = document.createElement("div"); = "containerDiv";
      view.ui.add(container, "top-right");

      slider = ClassedColorSlider.fromRendererResult(rendererResult, histogramResult);
      slider.container = container;
      slider.viewModel.precision = 1;

      // Update the renderer based on the user's input
      function changeEventHandler () {
        const renderer = layer.renderer.clone();
        renderer.classBreakInfos = slider.updateClassBreakInfos(renderer.classBreakInfos);
        layer.renderer = renderer;

      slider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], changeEventHandler);
    } else {
      // update the slider if another variable is selected
      slider.updateFromRendererResult(rendererResult, histogramResult);


A word of caution

Keep in mind that generating renderers should be avoided in most applications because of the performance cost affecting the end user. As stated in the Visualization overview: Smart mapping API guide topic, the Smart Mapping APIs were designed for two types of applications: data exploration apps and visualization authoring apps similar to ArcGIS Online. In all other cases, renderers should be saved to the layer or manually created using any of the renderer classes.

Additional visualization samples and resources

Sample search results