### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/migration.mdx

Configures the Storybook documentation metadata, setting the title for the migration guide.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Migration Guide" />
```

--------------------------------

### Install Shidoka Charts Package

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/README.md

Installs the Shidoka Charts library using npm. This command adds the package as a dependency to your project.

```bash
npm install @kyndryl-design-system/shidoka-charts -S
```

--------------------------------

### Theme Color Scheme Meta Tag

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/migration.mdx

Illustrates the requirement to add a meta tag for color scheme in the HTML head for theme support in Shidoka Charts.

```html
<meta name="color-scheme" content="light dark">
```

--------------------------------

### Shidoka Chart Canvas Legend Example

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Demonstrates how to use the native Chart.js canvas-rendered legend by setting `useHtmlLegend` to `false` and configuring legend position.

```html
<kd-chart
  type="bar"
  useHtmlLegend="false"
  .options=${{
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  }}
></kd-chart>
```

--------------------------------

### Shidoka Chart Enhanced HTML Legend Example

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Illustrates the usage of the enhanced HTML legend with custom styling options for legend items, such as box width, height, and border radius.

```html
<kd-chart
  type="bar"
  useHtmlLegend
  htmlLegendMaxHeight="200"
  .options=${{
    plugins: {
      legend: { position: 'bottom' },
      customLegend: {
        boxWidth: 16,
        boxHeight: 16,
        borderRadius: 2
      }
    }
  }}
></kd-chart>
```

--------------------------------

### Import Shidoka Charts Root Stylesheet

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/README.md

Demonstrates how to import the root stylesheet for Shidoka Charts and its foundation. The method of import depends on your project's setup (SCSS, CSS, or JS).

```css
@use '~@kyndryl-design-system/shidoka-foundation/scss/root.scss';
```

```css
@import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```

```javascript
import '@kyndryl-design-system/shidoka-foundation/css/root.css';
```

--------------------------------

### Doughnut Label Custom Strings

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/DoughnutLabel.mdx

Example of how to set custom string values for the doughnut chart's center labels.

```javascript
{
  doughnutLabel: {
    line1text: 'Line 1';
  }
}
```

--------------------------------

### Storybook Welcome Page

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/welcome.mdx

This snippet configures the Storybook welcome page for the Shidoka Charts project, setting the title to 'Welcome'. It uses the '@storybook/addon-docs/blocks' module.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Welcome" />
```

--------------------------------

### Component Creation Guidelines

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Standards for creating new components, including file structure, adding to the root index, adhering to generic design principles, and utilizing Lit directives and decorators.

```markdown
Components should be contained within their own folder containing `ts`, `scss`, and `stories` files. Sub-components can share the same folder.
Add new components to the root `index.ts` file.
Everything in the design system should be 100% generic. Remember that these components could be used to build any application. Application concerns must be separated.
Use Lit [directives](https://lit.dev/docs/templates/directives/) and [decorators](https://lit.dev/docs/components/decorators/) whenever possible.
Build responsive, build clean, focus on style and performance, enhance with quick and smooth animations.
```

--------------------------------

### Testing Strategy

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Details on the testing approach using `@storybook/test`, including the Test Runner for accessibility and interaction tests, and visual testing via Chromatic.

```markdown
We use [@storybook/test](https://storybook.js.org/docs/writing-tests) to execute a variety of automated tests.
  1. The [Test Runner](https://storybook.js.org/docs/writing-tests/test-runner) is used to execute Accessibility and Interaction tests both locally and in CI.
  1. [Accessibility Tests](https://storybook.js.org/docs/writing-tests/accessibility-testing)
  1. [Interaction Tests](https://storybook.js.org/docs/writing-tests/interaction-testing)
     1. Interaction Test writing strategy TBD
1. [Visual Testing via Chromatic](https://www.chromatic.com/)
  1. Provides visual screenshot comparison testing and a review process which integrates with our CI.
```

--------------------------------

### Storybook Grid Documentation

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Grid.mdx

This snippet shows how to document the Grid component using Storybook. It imports necessary components from '@storybook/addon-docs/blocks' and defines the meta information for the Grid stories. It also includes custom CSS to adjust the content width for better display of documentation.

```javascript
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as GridStories from './Grid.stories.js';

<Meta title="Grid" of={GridStories} />

# Grid

Examples of usage within the Foundation Grid. It is recommended to use a constant aspect ratio for all charts within a grid row, or a fixed height for all charts within a grid.

The examples below use custom aspect ratios per-row, and you can use the controls within each story to experiment with fixed height.

<style>
  {
    `
      .sbdocs-content {
        max-width: none !important;
      }
    `
  }
</style>

<Stories />
```

--------------------------------

### Integrating Legend with External Systems via onItemClick

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Shows how to use the `onItemClick` handler within the HTML legend options to capture user interactions with legend items. This handler provides detailed information about the clicked item and can be used to update external data stores, trigger analytics, or notify other components.

```javascript
<kd-chart
  type="bar"
  useHtmlLegend
  .htmlLegendOptions=${{
    onItemClick: (info) => {
      // Access to full chart instance
      const chart = info.chart;

      // Get detailed information about the clicked item
      const { label, isHidden, datasetIndex, dataIndex } = info;

      // Update external data source
      externalDataStore.updateVisibility(datasetIndex, !isHidden);

      // Log to analytics
      analyticsService.track('chart_interaction', {
        label,
        isHidden,
        chartType: chart.config.type
      });

      // Update other UI components
      notifyOtherComponents({
        type: 'LEGEND_CLICK',
        payload: info
      });
    }
  }}
></kd-chart>
```

--------------------------------

### Use Shidoka Chart Component

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/README.md

Shows how to import and use a Shidoka chart component. This involves importing the specific component file and then using its custom HTML element.

```javascript
import '@kyndryl-design-system/shidoka-charts/components/chart';
```

```html
<kd-chart></kd-chart>
```

--------------------------------

### Development Scripts

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Common npm scripts for managing the development environment, building, linting, testing, analyzing, and formatting the project.

```bash
npm i --legacy-peer-deps
npm run dev
npm run build
npm run lint
npm run test
npm run analyze
npm run format
```

--------------------------------

### Storybook Meta Configuration

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Color.mdx

Configures the Storybook metadata for the 'Grid' story, linking it to the ColorStories export.

```javascript
import {
  Meta,
  Story,
  Canvas,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as ColorStories from './Color.stories.js';

<Meta title="Grid" of={ColorStories} />
```

--------------------------------

### Shidoka HTML Legend API Options

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Details the configurable options for the Shidoka Charts HTML legend, including layout, callbacks, styling, and positioning.

```APIDOC
HTML Legend Options:

- `maxHeight`: Maximum height before scrolling begins. Default: 100px.
- `className`: CSS class for the legend container. Default: 'shidoka-legend'.
- `itemClassName`: CSS class for the legend items. Default: 'shidoka-legend-item'.
- `layout`: Legend layout orientation ('horizontal' or 'vertical'). Default: 'horizontal'.
- `onItemClick`: Callback when a legend item is clicked. Default: null.
- `adjustChartHeight`: Auto-adjust chart height for consistency. Default: true.
- `reservedLegendHeight`: Base space to reserve for legend (px). Default: 40.
- `columns`: Number of columns for grid layout (0 for auto flow). Default: 0.
- `labelFormatter`: Function to format labels: (label, item) => string. Default: null.
- `itemClassResolver`: Function to add custom classes: (item) => string. Default: null.
- `position`: Position of legend ('top', 'bottom', 'left', 'right'). Default: 'bottom'.
```

--------------------------------

### Conventional Commits and Git Hooks

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Guidelines for commit messages using Conventional Commits format and information about enforced Git hooks for commit message formatting (commitlint) and code formatting (Prettier).

```markdown
Commit messages MUST use [Conventional Commit format](https://www.conventionalcommits.org).
[Certain commit types](https://semantic-release.gitbook.io/semantic-release/#commit-message-format) like `fix:` (patch), `feat:` (minor), and `perf:` (major) or `BREAKING CHANGE:` (in the commit body or footer, major), will automatically trigger a release to publish a new package and update the semantic version.
[Conventional Commits Cheat Sheet](https://gist.github.com/Zekfad/f51cb06ac76e2457f11c80ed705c95a3)
Git hooks are installed to enforce commit message formatting with commitlint, and code formatting with Prettier.
```

--------------------------------

### Release Process

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Information on the automated release process triggered by specific commit messages pushed to the `main` or `beta` branches, emphasizing that all testing should be completed on the PR level.

```markdown
Releases will trigger automatically when the right commit messages are pushed to `main` or `beta`.
All testing must be done on the PR level before merging, since the release will happen automatically after merge.
```

--------------------------------

### Branching Strategy

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Defines the branching strategy for the project, including the purpose of `main` and `beta` branches, branch naming conventions, and adherence to GitHub Flow.

```markdown
`main` branch is for stable/current version changes.
`beta` branch is for future version/prerelease/breaking changes.
Prefix your branch names based on the type of change, ex `feature/`, `bugfix/`, or `hotfix/`.
Use the [GitHub Flow](https://docs.github.com/en/get-started/quickstart/github-flow).
```

--------------------------------

### Synchronize Multiple Charts with Legend Clicks

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Demonstrates how to coordinate multiple chart instances on a page by synchronizing legend click events. This allows users to hide/show datasets across charts simultaneously.

```html
<div class="dashboard-container">
  <kd-chart
    id="bar-chart"
    type="bar"
    useHtmlLegend
    .datasets=${datasets}
    @on-click=${(e) => syncAllCharts(e.detail, 'bar-chart')}
  ></kd-chart>

  <kd-chart
    id="line-chart"
    type="line"
    useHtmlLegend
    .datasets=${datasets}
    @on-click=${(e) => syncAllCharts(e.detail, 'line-chart')}
  ></kd-chart>
</div>
```

```javascript
/**
 * Synchronizes legend item visibility across all charts
 * @param {Object} info - The legend click info object
 * @param {string} sourceChartId - ID of the chart that triggered the event
 */
function syncAllCharts(info, sourceChartId) {
  const { datasetIndex, isHidden, label } = info;

  console.log(`Legend item "${label}" clicked on ${sourceChartId}`);

  // Update all other charts with the same dataset structure
  document.querySelectorAll('kd-chart').forEach((chartElement) => {
    if (chartElement.id !== sourceChartId) {
      // Get the Chart.js instance from the element
      const chartInstance = chartElement.chart;

      if (!chartInstance) return;

      // Different chart types use different methods to set visibility
      if (
        chartInstance.data &&
        chartInstance.data.datasets &&
        datasetIndex !== undefined
      ) {
        // For dataset-based charts (bar, line, etc.)
        const meta = chartInstance.getDatasetMeta(datasetIndex);
        if (meta) {
          meta.hidden = isHidden;
          chartInstance.update();
        }
      } else if (datasetIndex !== undefined) {
        // For pie/doughnut charts that use dataIndex instead
        chartInstance.toggleDataVisibility(datasetIndex);
        chartInstance.update();
      }

      // If you've implemented custom methods on kd-chart:
      // chartElement.updateDatasetVisibility(datasetIndex, isHidden);
    }
  });

  // Optionally update any related UI elements
  updateLegendHighlighting(label, isHidden);

  // You could also sync with external data storage
  saveUserPreferences({
    hiddenDatasets: collectHiddenDatasets(),
  });
}

/**
 * Collects currently hidden datasets across all charts
 * @returns {Array} - Array of hidden dataset indices
 */
function collectHiddenDatasets() {
  const hiddenDatasets = new Set();

  document.querySelectorAll('kd-chart').forEach((chartElement) => {
    const chart = chartElement.chart;
    if (!chart) return;

    chart.data.datasets.forEach((dataset, index) => {
      const meta = chart.getDatasetMeta(index);
      if (meta && meta.hidden) {
        hiddenDatasets.add(index);
      }
    });
  });

  return Array.from(hiddenDatasets);
}
```

--------------------------------

### CSS for Color Display

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Color.mdx

Provides basic CSS styling for displaying color swatches, using flexbox for layout.

```css
.colors {
  display: flex;
}

.colors span {
  height: 50px;
}
```

--------------------------------

### Debug Legend Interactions in Storybook

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Shows how to debug legend interactions within Storybook by setting up event listeners or using `htmlLegendOptions` to capture and log legend click events.

```javascript
// In your Storybook story
export const WithLegendDebugging = () => {
  const container = document.createElement('div');
  container.innerHTML = "\n    <kd-chart\n      id=\"debug-chart\"
      type=\"bar\"
      useHtmlLegend
      .datasets=${sampleData.datasets}
      .labels=${sampleData.labels}
    ></kd-chart>\n  ";

  // Listen for legend click events at the container level
  container.addEventListener('on-click', (event) => {
    action('legend-clicked')(event.detail);
  });

  return container;
};

WithLegendDebugging.parameters = {
  docs: {
    description: {
      story:
        'This example shows how to debug legend interactions using Storybook actions.',
    },
  },
};
```

```javascript
export const LegendWithStorybook = {
  render: () => html`
    <kd-chart
      type="bar"
      .datasets=${sampleData.datasets}
      .labels=${sampleData.labels}
      useHtmlLegend
      .htmlLegendOptions=${{
        onItemClick: (info) => {
          action('legend-click')({
            label: info.label,
            isHidden: info.isHidden,
            datasetIndex: info.datasetIndex,
            dataIndex: info.dataIndex,
          });
        },
      }}
    ></kd-chart>
  `,
};
```

--------------------------------

### Doughnut Label Scriptable Functions

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/DoughnutLabel.mdx

Demonstrates using scriptable functions to dynamically set the text for doughnut chart labels, allowing for formatting like adding commas to numbers.

```javascript
{
  doughnutLabel: {
    line1text: function (defaultValue, context) {
      // example: add commas to total
      return defaultValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  }
}
```

--------------------------------

### Code Review and Quality

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Requirements for code review, including peer review, passing status checks, and the recommendation to use the Prettier VS Code extension for consistent formatting.

```markdown
Always have someone peer review your PR.
Status checks must pass.
Strongly recommend using the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to ensure consistent formatting.
```

--------------------------------

### Documentation Standards

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/CONTRIBUTING.md

Requirements for documenting components using JSDoc, updating `custom-elements.json` via `npm run analyze`, and writing Storybook stories with enabled controls and variations.

```markdown
Document everything in your components with [JSDoc](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/#supported-jsdoc).
Update the `custom-elements.json` file with the `npm run analyze` script any time you add or change documentation. This is where the Storybook args tables are derived from.
Write your storybook stories with controls enabled for every property where possible.
When building modular components with sub-components, write multiple stories to show different variations. Include any sub-components in the main story so it renders a new tab with an args table.
```

--------------------------------

### Render Custom Styled HTML Legend

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Renders a custom-styled HTML legend using the `renderCustomLegend` function. This allows for unique styling of the legend elements.

```javascript
import { renderCustomLegend } from 'shidoka-charts/common/legend';

const chart = document.querySelector('kd-chart').chart;
const container = document.getElementById('legend-container');

renderCustomLegend(chart, container, {
  maxHeight: 100,
  boxWidth: 16,
  boxHeight: 16,
  className: 'custom-legend',
  itemClassName: 'custom-legend-item',
});
```

--------------------------------

### Doughnut Label Configuration Defaults

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/DoughnutLabel.mdx

Default configuration options for the doughnut label plugin, including disabling labels and setting text and font size for two lines.

```javascript
{
  doughnutLabel: {
    disabled: false, // boolean
    line1text: total, // string or function
    line1fontSize: '16px', // string
    line2text: options.scales.y.title.text, // string or function
    line2fontSize: '16px' // string
  }
}
```

--------------------------------

### Shidoka Chart HTML Legend Configuration

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Shows how to enable and configure the enhanced HTML legend in Shidoka Charts, including options for height adjustment, reserved space, and custom styling.

```javascript
plugins: {
  htmlLegend: {
    adjustChartHeight: true,  // enable/disable automatic height adjustment
    reservedLegendHeight: 40, // base height reserved for legend (px)
  }
}
```

--------------------------------

### Render Standard HTML Legend

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Renders a standard HTML legend for a chart using the `renderHTMLLegend` function. Allows customization of appearance, layout, and label formatting.

```javascript
import { renderHTMLLegend } from 'shidoka-charts/common/legend';

const chart = document.querySelector('kd-chart').chart;
const container = document.getElementById('legend-container');

renderHTMLLegend(chart, container, {
  maxHeight: 100, // Max height before scrolling begins
  boxWidth: 16, // Width of color box
  boxHeight: 16, // Height of color box
  borderRadius: 2, // Border radius of color box
  className: 'shidoka-legend', // CSS class for legend
  itemClassName: 'shidoka-legend-item', // CSS class for legend items
  layout: 'horizontal', // Legend layout orientation ('horizontal' or 'vertical')
  columns: 3, // Optional: Use grid layout with 3 columns
  position: 'right', // Optional: Position the legend ('top', 'bottom', 'left', 'right')
  labelFormatter: (label, item) => `${label} (${item.color})`, // Optional: Format labels
  itemClassResolver: (item) => (item.isHidden ? 'hidden-item' : null), // Optional: Add custom classes
});
```

--------------------------------

### Render Boxed Legend Style

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Renders a boxed style for the HTML legend using the `renderBoxedLegend` function. This style typically includes borders or backgrounds for each legend item.

```javascript
import { renderBoxedLegend } from 'shidoka-charts/common/legend';

const chart = document.querySelector('kd-chart').chart;
const container = document.getElementById('legend-container');

renderBoxedLegend(chart, container, {
  maxHeight: 100,
});
```

--------------------------------

### Storybook Stories Display

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Color.mdx

Renders all stories associated with the current component within the Storybook interface.

```html
<Stories />
```

--------------------------------

### Shidoka Chart HTML Legend Grid Layout Configuration

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Configures the Shidoka chart to use an HTML legend with a specified number of columns and a maximum height, suitable for organizing legend items in a grid.

```html
<kd-chart
  type="bar"
  useHtmlLegend
  .htmlLegendOptions=${{
    columns: 3,
    maxHeight: 200
  }}
></kd-chart>
```

--------------------------------

### Angular Chart Integration with Legend Click Event

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Demonstrates integrating a Shidoka chart in an Angular component, enabling an HTML legend, and listening for legend click events to filter data. It includes handling the event to identify hidden datasets and fetching filtered data via a service.

```typescript
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-sales-dashboard',
  template: `
    <kd-chart
      #salesChart
      type="bar"
      [useHtmlLegend]="true"
      [chartTitle]="'Sales Data'"
      [labels]="chartLabels"
      [datasets]="chartDatasets"
    >
    </kd-chart>
  `,
})
export class SalesDashboardComponent implements AfterViewInit {
  @ViewChild('salesChart') chartRef!: ElementRef;
  chartLabels: string[] = [];
  chartDatasets: any[] = [];

  constructor(private dataService: DataService) {
    this.loadInitialData();
  }

  ngAfterViewInit(): void {
    // Add event listener for legend clicks
    this.chartRef.nativeElement.addEventListener('on-click', (e: CustomEvent) =>
      this.handleLegendClick(e)
    );
  }

  handleLegendClick(event: CustomEvent): void {
    const { label, isHidden, datasetIndex } = event.detail;

    console.log(`Dataset '${label}' is now ${isHidden ? 'hidden' : 'visible'}`);

    // call API with filtered categories
    const hiddenCategories = this.getHiddenCategories();

    this.dataService.getFilteredData(hiddenCategories).subscribe((data) => {
      // update other components with filtered data
      this.updateRelatedComponents(data);
    });
  }

  getHiddenCategories(): string[] {
    const chart = this.chartRef.nativeElement.chart;
    const hidden: string[] = [];

    if (chart) {
      chart.data.datasets.forEach((dataset: any, index: number) => {
        if (chart.getDatasetMeta(index).hidden) {
          hidden.push(dataset.label);
        }
      });
    }

    return hidden;
  }

  loadInitialData(): void {
    this.dataService.getData().subscribe((data) => {
      this.chartLabels = data.labels;
      this.chartDatasets = data.datasets;
    });
  }

  updateRelatedComponents(data: any): void {
    // update tables, metrics, or other visualizations
  }
}
```

--------------------------------

### Customizing Scrollable Legends with CSS

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Demonstrates how to configure a chart to use an HTML legend and apply custom CSS to style a scrollable legend container, controlling its maximum height and appearance.

```html
<kd-chart
  type="pie"
  useHtmlLegend
  .options=${{
    plugins: {
      htmlLegend: {
        containerClass: 'overflow-legend-container',
        maxHeight: 200, // Controls scrolling threshold
      }
    }
  }}
></kd-chart>

<style>
  /* Custom CSS to enhance scrollable legends */
  .overflow-legend-container .shidoka-legend-scroll-content {
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 8px;
  }
</style>
```

--------------------------------

### Shidoka Chart HTML Legend Structure for Styling

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Details the hierarchical HTML structure of the Shidoka chart's legend, providing class names for elements like the container, legend items, buttons, colors, and labels, which can be targeted for custom CSS styling.

```html
div.shidoka-legend-container
     └── div.shidoka-legend
          └── ul.shidoka-legend-items
               └── li.shidoka-legend-item
                    └── button.shidoka-legend-item-button
                         ├── span.shidoka-legend-item-color
                         └── span.shidoka-legend-item-label
                              └── span.shidoka-legend-item-value (for pie/doughnut charts)
```

--------------------------------

### Shidoka Chart HTML Legend Custom Positioning

Source: https://github.com/kyndryl-design-system/shidoka-charts/blob/main/src/stories/Legend.mdx

Customizes the positioning and layout of the Shidoka chart's HTML legend, placing it to the 'right' and arranging items in a 'vertical' layout.

```html
<kd-chart
  type="bar"
  useHtmlLegend
  .htmlLegendOptions=${{
    position: 'right',
    layout: 'vertical'
  }}
></kd-chart>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.