Logos and positioning.

Shared logo display, placement, and Pro customization for every chart.

Default logo

Community displays the website's three-bar symbol and bold syidax wordmark on one line at 118×32px. The logo sits flush in the selected corner of the plot area, excluding axes, legends, and navigators, and appears above legends, tooltips, and loading states. A thin outline separates it from the data without a background box. The logo and outline adapt to the theme and maintain at least 7:1 contrast.

brand-position supports top-left, top-right, bottom-left, and bottom-right; the default is bottom-right. Direct chart tags and the shared sy-chart use the same property. The same corner is used on screen and in PNG and SVG exports. Data files such as CSV do not include a logo.

Data Zoom, Navigator, and Visual Map do not draw separate logos. Set logo properties on their connected target chart.

Preview and source code

Logo positionLogo

A valid demo license with logo customization is active. Changing settings updates the preview and code below.

Complete code for the current settings

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-line-chart",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Organic",
            "color": "#8263d9",
            "values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
          },
          {
            "name": "Direct",
            "color": "#239c91",
            "values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
          },
          {
            "name": "Referral",
            "color": "#e99954",
            "values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "smooth": "none",
        "thickness": 2.5,
        "marker": "circle",
        "markerSize": 4,
        "legend": true,
        "tooltip": {
          "show": true,
          "mode": "shared"
        },
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'line example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

Pro customization

Use the Pro chart.branding entitlement to add your own logo, or use brand-logo="none" to remove it. Community retains the default Syidax logo.

<sy-line-chart brand-position="top-left"></sy-line-chart>

<!-- Pro: requires a valid chart.branding entitlement -->
<sy-line-chart brand-position="bottom-right" brand-logo="none"></sy-line-chart>

<script type="module">
  // Convert a local file to a data URL, then assign it.
  function setLogo(chart, file) {
    if (!["image/png", "image/jpeg", "image/webp"].includes(file.type) || file.size > 100 * 1024) {
      throw new Error("Choose a PNG, JPEG, or WebP file up to 100 KB.");
    }
    const reader = new FileReader();
    reader.addEventListener("load", () => { chart.brandLogo = reader.result; });
    reader.readAsDataURL(file);
  }
</script>

Image logos use PNG, JPEG, or WebP data URLs up to 100 KB. SVG and external image URLs are unsupported. Uploaded images are used only in this browser's preview and source code.