How to zoom a c3 chart in drupal 11?

General
1

My chart

I’m building a Drupal 11 site and using the “Charts” contrib module to render data from a custom content type (medicion) via JSON:API. My content type has a date field (field_fecha_de_medicion) and numeric fields (field_valor_medido, field_relacion_senal_ruido, etc.). I’ve already set up a View with the Charts formatter to display a chart powered by Chart.js, which works fine—but I need two things that Chart.js can’t easily do in this setup:

Interactive zooming (drag, mouse wheel or buttons)

A horizontal threshold line (e.g. a red line at y = 50)

I decided to switch to C3.js by changing my View’s format to Chart (C3.js) and adding an Attachment display so I can show both the existing Chart.js graph and a new C3.js graph on the same page. I’ve configured my Attachment like this:

Chart type: Line

Label field: field_fecha_de_medicion

Data series: field_valor_medido

…but I never see the “Library options” (JSON) textarea in the C3.js configuration dialog

Switching the display to “Attachment” and attaching it to the Page

Enabling C3.js Charts and clearing caches (drush cr)

Verifying my View configuration in YAML export/import

Checking that the library_options keys appear in the exported YAML

Adding a custom CSS rule for .threshold-line

2

You’re doing great integrating advanced chart features into Drupal 11 with the Charts module, and your strategy of switching to C3.js for its support for features like interactive zoom and threshold lines is spot on. The issue you’re encountering—not seeing the “Library options” JSON textarea—is most likely due to how the Charts module determines when to expose advanced configuration options based on the chart type and display mode.

Here’s a structured approach to troubleshoot and solve the problem:

1. Understand why “Library options” is missing

The “Library options” textarea should appear when:

  • You’re using a chart library that supports it (like C3.js).
  • You’re using a View display format that supports additional options.
  • The module version and settings allow exposing that UI (some older versions only expose it for certain chart types).

2. Make sure your Chart display uses C3.js correctly

In your View display:

  • Set Format to Chart (C3.js)
  • Under Format settings, ensure that the Chart type is set (e.g. Line, Bar).
  • Then, look under “Library options” — if it’s still missing:

3. Edit View display YAML directly (workaround)

Since you mentioned YAML import/export works, you can add library_options manually in the YAML and re-import. Example:

display:
  attachment_1:
    display_plugin: attachment
    display_options:
      format:
        plugin_id: charts_c3
        options:
          chart_type: line
          label_field: field_fecha_de_medicion
          series:
            - field: field_valor_medido
              label: "Medido"
          library_options:
            axis:
              x:
                type: timeseries
                tick:
                  format: "%Y-%m-%d"
            grid:
              y:
                lines:
                  - value: 50
                    text: "Threshold"
                    position: 'middle'
                    class: 'threshold-line'
            zoom:
              enabled: true

Then run:

drush cim -y

drush cr

You should see the threshold line and interactive zoom enabled now.

4. Ensure C3.js and D3.js are loaded properly

Even with the config right, if the libraries don’t load:

  • Confirm c3.css and c3.js are being added to the page.
  • If not, add them manually in your theme’s libraries.yml or via hook_page_attachments().

5. Custom CSS for styling the threshold line

In your theme or a custom module:

.threshold-line line {
  stroke: red !important;
  stroke-width: 2;
  stroke-dasharray: 5, 5;
}

Summary: What you can do now

  • Confirm you’re using the correct format plugin: charts_c3
  • If UI options are missing, edit YAML directly to add library_options
  • Clear caches and re-import config
  • Ensure C3/D3 libraries are included and loaded
  • Style with custom CSS