<commit_before><div class="content-section introduction">
    <div>
        <span class="feature-title">Charts</span>
        <span>Chart components are based on <a style="color:#68d4f9" href="http://www.chartjs.org/">Charts.js</a> 2.7.x, an open source HTML5 based charting library.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0px">Charts.js</h3>
    <p>To begin with, first you must install the charts.js package using npm and then include 
        it in your project. An example with CLI would be;</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install chart.js --save
</code>
</pre>
        
<pre>
<code class="language-typescript" pCode ngNonBindable>
"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    //..others
],
</code>
</pre>

    <h3>Chart Component</h3>
    <p>Chart component is used to display a chart on page. The classname is UIChart and element tag is p-chart.</p>
    
<h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;ChartModule&#125; from 'primeng/chart';
</code>
</pre>

    <h3>Change Detection</h3>
    <p>In order to chart to redraw itself, a new data object needs to be created. Changing the array contents without creating a new
    array instance does not trigger change detection.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="pie" [data]="data"&gt;&lt;/p-chart&gt;
&lt;button type="button" pButton (click)="update($event)"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
update(event: Event) &#123;
    this.data = //create new data
&#125;
</code>
</pre>

    <h3>Properties</h3>
    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>type</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Type of the chart.</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>any</td>
                    <td>null</td>
                    <td>Data to display.</td>
                </tr>
                <tr>
                    <td>options</td>
                    <td>any</td>
                    <td>null</td>
                    <td>Options to customize the chart.</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Width of the chart.</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Height of the chart.</td>
                </tr>
                <tr>
                    <td>responsive</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Whether the chart is redrawn on screen size change.</td>
                </tr>
                <tr>
                    <td>onDataSelect</td>
                    <td>function</td>
                    <td>null</td>
                    <td>Callback to execute when an element on chart is clicked.</td>
                </tr>
            </tbody><commit_msg>Add documentation<commit_after><div class="content-section introduction">
    <div>
        <span class="feature-title">Charts</span>
        <span>Chart components are based on <a style="color:#68d4f9" href="http://www.chartjs.org/">Charts.js</a> 2.7.x, an open source HTML5 based charting library.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0px">Charts.js</h3>
    <p>To begin with, first you must install the charts.js package using npm and then include 
        it in your project. An example with CLI would be;</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install chart.js --save
</code>
</pre>
        
<pre>
<code class="language-typescript" pCode ngNonBindable>
"scripts": [
    "../node_modules/chart.js/dist/Chart.js",
    //..others
],
</code>
</pre>

    <h3>Chart Component</h3>
    <p>Chart component is used to display a chart on page. The classname is UIChart and element tag is p-chart.</p>
    
<h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;ChartModule&#125; from 'primeng/chart';
</code>
</pre>

    <h3>Change Detection</h3>
    <p>In order to chart to redraw itself, a new data object needs to be created. Changing the array contents without creating a new
    array instance does not trigger change detection.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-chart type="pie" [data]="data"&gt;&lt;/p-chart&gt;
&lt;button type="button" pButton (click)="update($event)"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
update(event: Event) &#123;
    this.data = //create new data
&#125;
</code>
</pre>

    <h3>Properties</h3>
    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>type</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Type of the chart.</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>any</td>
                    <td>null</td>
                    <td>Data to display.</td>
                </tr>
                <tr>
                    <td>options</td>
                    <td>any</td>
                    <td>null</td>
                    <td>Options to customize the chart.</td>
                </tr>
                <tr>
                    <td>plugins</td>
                    <td>any[]</td>
                    <td>null</td>
                    <td>Array of per-chart plugins to customize the chart behaviour.</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Width of the chart.</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>string</td>
                    <td>null</td>
                    <td>Height of the chart.</td>
                </tr>
                <tr>
                    <td>responsive</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>Whether the chart is redrawn on screen size change.</td>
                </tr>
                <tr>
                    <td>onDataSelect</td>
                    <td>function</td>
                    <td>null</td>
                    <td>Callback to execute when an element on chart is clicked.</td>
                </tr>
            </tbody>
{'fraction_non_alphanumeric': 0.14137128780621322, 'fraction_numerical': 0.008211304228821678, 'mean_word_length': 1.431946755407654, 'pattern_counts': {'":': 2, '<': 279, '<?xml version=': 0, '>': 279, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6123565', 'n_tokens_mistral': 2259, 'n_tokens_neox': 2107, 'n_words': 530}