### Install DSFR Chart via NPM

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Install the DSFR Chart module using npm. This command adds the necessary package to your project's dependencies, allowing you to import and use its components.

```bash
npm install @gouvfr/dsfr-chart
```

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

### DSFR Bar Chart Component Examples

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Examples demonstrating the DSFR Bar Chart component for vertical, horizontal, and stacked bar visualizations. Supports custom palettes, tooltips, and highlighting specific bars.

```html
<!-- Basic vertical bar chart -->
<bar-chart
  x='[["2025", "2030", "2035", "2040", "2050"]]'
  y="[[69.1, 70.3, 71.4, 72.5, 74]]"
  name='["Population"]'
  selected-palette="default"
  unit-tooltip="millions">
</bar-chart>

<!-- Horizontal bar chart -->
<bar-chart
  x='[["Q1", "Q2", "Q3", "Q4"]]'
  y="[[200, 400, 600, 800]]"
  horizontal="true"
  selected-palette="sequentialAscending"
  unit-tooltip="units">
</bar-chart>

<!-- Stacked bar chart with multiple series -->
<bar-chart
  x='[["Category A", "Category B", "Category C", "Category D"]]'
  y="[[15, 19, 15, 13], [45, 40, 47, 41], [36, 32, 34, 44], [4, 9, 4, 2]]"
  name='["Series 1", "Series 2", "Series 3", "Series 4"]'
  stacked="true"
  selected-palette="divergentDescending"
  unit-tooltip="%">
</bar-chart>

<!-- Highlight specific bars with neutral palette -->
<bar-chart
  x='[["Jan", "Feb", "Mar", "Apr", "May", "Jun"]]'
  y="[[5, 10, 15, 20, 25, 30]]"
  selected-palette="neutral"
  highlight-index="[2, 4]"
  unit-tooltip="k€">
</bar-chart>
```

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

### DSFR Pie Chart Component Examples

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Examples of using the DSFR Pie Chart component to display proportional data. Supports both donut (hollow) and filled pie styles, with options for custom palettes and tooltips.

```html
<!-- Donut chart (default hollow center) -->
<pie-chart
  x='[["Permanent Jobs", "Self-employed", "Fixed-term", "Apprentices", "Temporary"]]'
  y="[[74.8, 11.7, 9.3, 1.6, 2.6]]"
  name='["Permanent Jobs", "Self-employed", "Fixed-term", "Apprentices", "Temporary"]'
  unit-tooltip="%"
  selected-palette="categorical">
</pie-chart>

<!-- Filled pie chart -->
<pie-chart
  x='[["Group A", "Group B", "Group C"]]'
  y="[[10, 20, 30]]"
  fill="true"
  unit-tooltip="%"
  selected-palette="divergentAscending">
</pie-chart>
```

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

### DSFR Bar-Line Chart Component Example

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

An example of the DSFR Bar-Line Chart component, which combines bar and line series on a single visualization with independent y-axes. It allows for detailed comparison of different data types.

```html
<!-- Combined bar and line chart -->
<bar-line-chart
  x="[1, 2, 3, 4, 5]"
  y-bar="[15, 18, 22, 28, 33]"
  y-line="[20, 25, 30, 35, 40]"
  selected-palette="sequentialAscending"
  unit-tooltip-bar="kWh"
  unit-tooltip-line="kW"
  y-bar-min="0"
  y-bar-max="40"
  y-line-min="0"
  y-line-max="50">
</bar-line-chart>
```

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

### DSFR Line Chart Component Examples

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Examples of using the DSFR Line Chart component to visualize trends and time-series data. Supports single or multiple series, custom palettes, units, and axis limits.

```html
<!-- Basic line chart with single series -->
<line-chart
  x="[[1, 2, 3, 4, 5]]"
  y="[[10, 20, 15, 25, 30]]">
</line-chart>

<!-- Multiple series with custom palette and units -->
<line-chart
  x="[[2020, 2021, 2022, 2023], [2020, 2021, 2022, 2023]]"
  y="[[30, 35, 32, 38], [25, 28, 30, 35]]"
  selected-palette="categorical"
  unit-tooltip="%"
  y-min="0"
  y-max="50">
</line-chart>

<!-- Divergent color palette example -->
<line-chart
  x="[[1, 2, 3, 4]]"
  y="[[1000, 2000, 3000, 4000]]"
  selected-palette="divergentAscending"
  unit-tooltip="€">
</line-chart>
```

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

### Apply Default Single Color to Line Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Demonstrates how to use the default single color palette for a line chart. This is a basic usage for simple data representation.

```html
<line-chart
  x="[[1, 2, 3]]"
  y="[[10, 20, 30]]"
  selected-palette="default">
</line-chart>
```

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

### Apply Categorical Palette for Pie Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Illustrates the use of the categorical color palette for a pie chart, suitable for up to 8 distinct categories. Each slice will receive a different color from the palette.

```html
<pie-chart
  x='[["Cat1", "Cat2", "Cat3", "Cat4", "Cat5"]]'
  y="[[20, 20, 20, 20, 20]]"
  selected-palette="categorical">
</pie-chart>
```

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

### Apply Neutral Palette for Highlighting in Bar Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Shows how to apply the neutral color palette to a bar chart, often used for highlighting specific data points. The 'highlight-index' attribute is used to specify which bar to emphasize.

```html
<bar-chart
  x='[["A", "B", "C"]]'
  y="[[10, 20, 30]]"
  selected-palette="neutral"
  highlight-index="[1]">
</bar-chart>
```

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

### Apply Sequential Descending Palette to Bar Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Shows how to apply the sequential descending color palette to a bar chart, with colors progressing from dark to light. This is also suitable for ordered data.

```html
<bar-chart
  x='[["Q1", "Q2", "Q3", "Q4"]]'
  y="[[100, 200, 300, 400]]"
  selected-palette="sequentialDescending">
</bar-chart>
```

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

### Import Specific DSFR Chart Components

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Import individual DSFR Chart components, such as LineChart and BarChart, along with their respective CSS files. This approach is useful for optimizing bundle size by only including the components you need.

```javascript
import '@gouvfr/dsfr-chart/LineChart';
import '@gouvfr/dsfr-chart/LineChart.css';
import '@gouvfr/dsfr-chart/BarChart';
import '@gouvfr/dsfr-chart/BarChart.css';
```

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

### Apply Sequential Ascending Palette to Bar Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Demonstrates using the sequential ascending color palette for a bar chart, where colors progress from light to dark. This is ideal for data that has a natural order or progression.

```html
<bar-chart
  x='[["Q1", "Q2", "Q3", "Q4"]]'
  y="[[100, 200, 300, 400]]"
  selected-palette="sequentialAscending">
</bar-chart>
```

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

### Static File Import for DSFR Chart Components (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Include DSFR Chart components in an HTML page by referencing their JavaScript and CSS files directly. This method is suitable for projects not using a module bundler like Webpack or Vite.

```html
<!-- Import all components with ESM build -->
<script type="module" src="./DSFRChart.js"></script>
<link rel="stylesheet" href="./DSFRChart.css" />

<!-- Or import specific component -->
<script type="module" src="./LineChart.js"></script>
<link rel="stylesheet" href="./LineChart.css" />
```

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

### DataBox Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A container component for charts that includes built-in features for metadata, tooltips, modals, and accessibility controls. It enhances chart presentation and user interaction.

```html
<data-box
  id="employment-chart"
  title="Employment in France 1926-1950"
  tooltip-title="Employment Data"
  tooltip-content="Number of jobs in France from 1926 to 1950, by gender. Based on INSEE and Pôle Emploi data."
  modal-title="Detailed Information"
  modal-content="Additional context about the employment data visualization."
  source="INSEE, Pôle Emploi"
  date="2021-01-01"
  default-source="pole-emploi"
  trend="5%"
  segmented-control="true"
  screenshot="true"
  download="true"
  fullscreen="true"
  actions='["Official Source", "Pôle Emploi"]'>
</data-box>
```

```html
<scatter-chart
  databox-id="employment-chart"
  databox-type="chart"
  databox-source="pole-emploi"
  x="[[1926, 1930, 1935, 1940, 1945, 1950], [1926, 1930, 1935, 1940, 1945, 1950]]"
  y="[[48, 50, 52, 54, 56, 60], [61, 63, 65, 67, 69, 73]]"
  name='["Women", "Men"]'
  unit-tooltip="%"
  show-line="true">
</scatter-chart>
```

```html
<table-chart
  databox-id="employment-chart"
  databox-type="table"
  databox-source="pole-emploi"
  x="[1926, 1930, 1935, 1940, 1945, 1950]"
  y="[[48, 50, 52, 54, 56, 60], [61, 63, 65, 67, 69, 73]]"
  name='["Women", "Men"]'
  table-name="Years">
</table-chart>
```

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

### Import All DSFR Chart Components

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Import all available DSFR Chart components and their associated CSS styles into your Vue.js application. This is a convenient way to make all charting functionalities immediately available.

```javascript
import '@gouvfr/dsfr-chart';
import '@gouvfr/dsfr-chart/css';
```

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

### Map Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A geographic visualization component for displaying French departments or regions with color-coded values. Supports both department-level and region-level views with customizable palettes.

```html
<map-chart
  data='{
    "01": 72, "02": 83, "03": 67, "04": 36, "05": 47,
    "06": 96, "07": 77, "08": 75, "09": 57, "10": 58,
    "75": 96, "92": 46, "93": 89, "94": 18, "95": 72,
    "2A": 63, "2B": 16
  }'
  value="65"
  name="Success Rate"
  level="dep"
  selected-palette="sequentialAscending">
</map-chart>
```

```html
<map-chart
  data='{
    "84": 1, "32": 10, "93": 20, "44": 30, "76": 40,
    "28": 50, "75": 60, "24": 70, "53": 80, "94": 90
  }'
  value="50"
  name="Regional Indicator"
  level="reg"
  selected-palette="divergentDescending">
</map-chart>
```

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

### Radar Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A radar (spider) chart component for comparing multivariate data across multiple dimensions. It supports multi-series and two-series comparisons with customizable tooltips.

```html
<radar-chart
  x='[["Non-employed", "Permanent", "Fixed-term", "Apprentices", "Temporary"]]'
  y="[[2.4, 43.9, 28.5, 17.2, 8.0],
      [10.6, 77.8, 8.8, 0.2, 2.6],
      [16.5, 77.3, 4.9, 0.0, 1.3]]"
  name='["15-24 years", "25-49 years", "50-64 years"]'
  selected-palette="categorical"
  unit-tooltip="%">
</radar-chart>
```

```html
<radar-chart
  x='[["Speed", "Power", "Agility", "Endurance", "Precision"]]'
  y="[[85, 90, 75, 80, 70], [60, 70, 80, 90, 100]]"
  name='["Athlete 1", "Athlete 2"]'
  selected-palette="divergentAscending"
  unit-tooltip="points">
</radar-chart>
```

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

### Scatter Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A scatter plot component to visualize relationships between two variables. It supports basic plots, plots with connecting lines, and multiple series, with options for palette selection.

```html
<scatter-chart
  x="[[1, 5, 8]]"
  y="[[30, 10, 20]]">
</scatter-chart>
```

```html
<scatter-chart
  x="[[1, 5, 8]]"
  y="[[30, 10, 20]]"
  show-line="true"
  selected-palette="default">
</scatter-chart>
```

```html
<scatter-chart
  x="[[1, 5, 8], [2, 6, 9]]"
  y="[[30, 10, 20], [15, 25, 35]]"
  selected-palette="divergentAscending">
</scatter-chart>
```

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

### Table Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A table chart component that presents data in a tabular format, serving as an accessible alternative to graphical charts. It displays data with defined axes and series names.

```html
<table-chart
  x="[2020, 2021, 2022, 2023, 2024]"
  y="[[48, 49, 50, 51, 52], [61, 62, 63, 64, 65]]"
  name='["Women", "Men"]'
  table-name="Years">
</table-chart>
```

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

### Apply Divergent Descending Palette to Map Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Demonstrates applying the divergent descending color palette (red to yellow to green) to a map chart. This is effective for data where deviations from a norm are important, such as performance scores.

```html
<map-chart
  data='{"01": 10, "02": 50, "03": 90}'
  value="50"
  name="Performance Score"
  selected-palette="divergentDescending">
</map-chart>
```

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

### Gauge Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A circular gauge component that visually represents progress towards a target value. It can be used for simple progress display or percentage tracking.

```html
<gauge-chart
  value="16"
  init="10"
  target="20">
</gauge-chart>
```

```html
<gauge-chart
  value="75"
  init="0"
  target="100">
</gauge-chart>
```

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

### Apply Divergent Ascending Palette to Map Chart

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

Illustrates the use of the divergent ascending color palette (green to yellow to red) for a map chart. This palette is useful for data that has a central point or threshold, like risk levels.

```html
<map-chart
  data='{"01": 10, "02": 50, "03": 90}'
  value="50"
  name="Risk Level"
  selected-palette="divergentAscending">
</map-chart>
```

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

### Regional Map Chart Component (HTML)

Source: https://context7.com/gouvernementfr/dsfr-chart/llms.txt

A specialized map component providing a detailed view of departments within a specific French region. It allows focused visualization and data display for a particular region.

```html
<map-chart-reg
  data='{
    "75": 96, "77": 21, "78": 48, "91": 87,
    "92": 46, "93": 89, "94": 18, "95": 72
  }'
  value="65"
  name="Île-de-France Indicator"
  region="11"
  selected-palette="categorical">
</map-chart-reg>
```

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