Chart | Unified UX

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.