uwc-chart code examples, properties, methods, events and Live Demo.

Here is an example of using a Chart in a plain html page: (Note the additional chart javascript bundle)

<html>
    <head>
        <link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
        <script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
        <script src="https://developer.temenos.com/uux/unified-ux-chart.min.js"></script>
    </head>
    <body>
      <uwc-chart></uwc-chart>
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          document.querySelector("uwc-chart").config = {
            chart: {
              styledMode: true
            },
            credits: {
              enabled: false
            },
            title: {
              text: "Example title",
            },
            subtitle: {
              text:
                'Example subtitle',
            },
            yAxis: {
              title: {
                text: "yaxis label",
              },
            },
            legend: {
              layout: "vertical",
              align: "right",
              verticalAlign: "middle",
            },
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    enabled: false,
                }
              },
              series: {
                pointStart: 2020,
              },
            },
            xAxis: {
              accessibility: {
                rangeDescription: "x axis",
              },
            },
          }

          document.querySelector("uwc-chart").data = [{
            type: "column",
            name: "bill",
            data: [5, 5, 7, 8, 1],
          },{
            type: "line",
            name: "fred",
            data: [1, 2, 3, 10, 4],
          }, {
            type: "spline",
            name: "bob",
            data: [4, 7, 2, 3, 10],
          }]
        })
      </script>
    </body>
</html>

There are some illustrative images of chart component on the usage tab. Please get in touch to see the UUX chart component in action. We are unable to provide a live demo on our public website for licensing reasons.

The unified-ux-chart.min.js bundle moved from Highcharts 10.3.3 to Highcharts 12.5.0 (two major versions). The <uwc-chart> component's own API — config, data, highcharts, redraw(), updateChart() — is unchanged. What changes is what you pass inside the config object and how you reference Highcharts internals in event callbacks.

New chart types: TreeGraph and FlowMap are now bundled — no separate module needed
--highcharts-* CSS custom properties: v12 exposes chart chrome colours as CSS variables (--highcharts-neutral-color-100, --highcharts-background-color, etc.) that can be overridden on the <uwc-chart> element
Enhanced accessibility ARIA: aria-controls, aria-describedby, aria-roledescription, aria-selected are now emitted automatically — better screen reader support with no config change
Tooltip fixed positioning: New tooltip.fixed and tooltip.position options for declarative tooltip placement
Navigator and Scrollbar support: Bundled in v12

The <uwc-chart> element, its attributes, and all --uwc-chart-* / --uwc-palette-* CSS custom properties are fully backward compatible
The config, data, redraw(), and updateChart() component API is unchanged
All other click events — plotOptions.series.point.events.click, plotOptions.series.events.click, chart.events.click, drilldown events, checkboxClick, select, unselect — have stable APIs from v10 through v12; this and event context are unaffected
All existing bundled modules (heatmap, drilldown, accessibility, exporting, sankey, treemap, solid-gauge, sunburst) remain available

If you use formatter functions or format strings containing {point.x} to display a category name, this no longer returns the category string in v12. Replace with {category}.

// v10 — worked on category axes
tooltip: { format: '{point.x}: {point.y}' }

// v12 — use {category} for the label on a category axis
tooltip: { format: '{category}: {point.y}' }

Options previously under Highcharts.setOptions({ global: { ... } }) for timezone and time handling are now under time: { ... }.

// v10
Highcharts.setOptions({ global: { useUTC: false } });

// v12
Highcharts.setOptions({ time: { useUTC: false } });

If your charts rely on the title being centred, set it explicitly — the default changed from 'center' to automatic/adaptive.

title: { text: 'My Chart', align: 'center', minScale: 1 }

The "Download PDF" menu item no longer appears by default. If your application surfaces the Highcharts export menu and PDF was relied upon, add it back explicitly via exporting.buttons.

If any custom CSS targets the Highcharts accessibility proxy button:

/* v10 */
.highcharts-a11y-proxy-button { ... }

/* v12 */
.highcharts-a11y-proxy-element { ... }

series.xData, series.yData, series.processedXData, and series.processedYData no longer exist. If you access these in chart event callbacks or custom extensions, switch to series.getColumn('x') / series.getColumn('y').

plotOptions.series.events.legendItemClick and plotOptions.pie.point.events.legendItemClick were removed in Highcharts v11.4.4 without a proper deprecation cycle. The canonical path in v12 is legend.events.itemClick.

Inside this callback this is the Legend object, not the Series or Point. Access the clicked item via event.legendItem.

// v10 — series-level event
plotOptions: {
  series: {
    events: {
      legendItemClick: function() {
        this.setVisible(!this.visible);   // 'this' was the Series
      }
    }
  }
}

// v12 — legend-level event; access series via event.legendItem
legend: {
  events: {
    itemClick: function(event) {
      const series = event.legendItem;
      series.setVisible(!series.visible);
      return false;
    }
  }
}

This applies to both series charts and pie charts — both route through legend.events.itemClick in v12. For pie charts event.legendItem is a Point; for series charts it is a Series.

In v10, series.legendItem was the SVG text label element directly. In v12 it is a container object. Any code that reads legend SVG elements inside event callbacks needs updating:

v10	v12
`series.legendItem` (SVG text)	`series.legendItem.label`
`series.legendLine`	`series.legendItem.line`
`series.legendSymbol`	`series.legendItem.symbol`
`series.legendGroup`	`series.legendItem.group`

When accessing these from a legend.events.itemClick callback, the Series is at event.legendItem, so the text SVGElement is event.legendItem.legendItem?.label.

Note: series.legendItem.symbol may be absent when plotOptions.series.marker.enabled: false.

Search your config objects for each of these before deploying the new bundle:

Formatter strings — replace {point.x} with {category} where the axis type is category
global.* time options — move to time.*
title.align — add align: 'center' and minScale: 1 if centred titles are expected
PDF export — check if the Highcharts export menu is surfaced; add PDF back via exporting.buttons if needed
Custom CSS — search for .highcharts-a11y-proxy-button; rename to .highcharts-a11y-proxy-element
Legend click events — replace plotOptions.series.events.legendItemClick and plotOptions.pie.point.events.legendItemClick with legend.events.itemClick; access the series/point via event.legendItem instead of this
Legend SVG element access — replace series.legendItem (raw SVG element) with series.legendItem.label; update any .legendLine / .legendSymbol references to the new nested paths
Internal series data arrays — search for .xData, .yData, .processedXData, .processedYData; replace with .getColumn()
highcharts escape-hatch prop — if you pass your own Highcharts instance via <uwc-chart .highcharts="...">, that instance must also be upgraded to v12
Bundle load order — still unified-ux-web.min.js first, then unified-ux-chart.min.js; this is unchanged