Taiga UI 5.0 is out!

LineChart ADDON-CHARTS

Examples API GitHub

On this page

See also

LineDaysChart

Line 

    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [horizontalLines]="3"
    [tuiLineChartHint]="hintContent"
    [verticalLines]="5"
>
    <tui-line-chart
        [dots]="true"
        [height]="200"
        [value]="value"
        [width]="400"
        [x]="0"
        [xStringify]="stringify"
        [y]="0"
        [yStringify]="stringify"
    />
</tui-axes>

    

      
      
    

  
    
      .axes {
    block-size: 12.5rem;
    inline-size: 25rem;
    color: #bc71c9;
}

Smooth 

    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [horizontalLines]="3"
    [verticalLines]="5"
>
    <tui-line-chart
        [filled]="true"
        [height]="200"
        [smoothingFactor]="50"
        [value]="value"
        [width]="400"
        [x]="0"
        [y]="0"
    />
</tui-axes>

    

      
      
    

  
    
      .axes {
    block-size: 12.5rem;
    inline-size: 25rem;
    color: #bc71c9;
}

Dotted 

    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [horizontalLines]="3"
    [verticalLines]="5"
>
    <tui-line-chart
        class="chart chart_dotted"
        [dots]="true"
        [height]="200"
        [value]="dotted"
        [width]="400"
        [x]="0"
        [y]="0"
    />
    <tui-line-chart
        class="chart"
        [dots]="true"
        [height]="200"
        [value]="solid"
        [width]="400"
        [x]="0"
        [y]="0"
    />
    <tui-line-chart
        class="chart chart_dashed"
        [dots]="true"
        [height]="200"
        [value]="dashed"
        [width]="400"
        [x]="0"
        [y]="0"
    />
</tui-axes>

    

      
      
    

  
    
      .axes {
    block-size: 12.5rem;
    inline-size: 25rem;
    color: #bc71c9;
}

.chart {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;

    &_dotted {
        stroke-dasharray: 2;
    }

    &_dashed {
        stroke-dasharray: 4;
    }
}

Hint 

    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [horizontalLines]="3"
    [verticalLines]="5"
>
    <tui-line-chart
        [height]="200"
        [tuiHintContent]="hint"
        [value]="value"
        [width]="400"
        [x]="0"
        [y]="0"
    />
</tui-axes>

<tui-axes
    class="axes tui-space_top-10"
    [horizontalLines]="2"
    [verticalLines]="4"
>
    <tui-line-chart
        tuiHintAppearance="error"
        [dots]="true"
        [height]="200"
        [tuiHintContent]="hintContent"
        [value]="singleValue"
        [width]="400"
        [x]="0"
        [y]="0"
    />
</tui-axes>

<ng-template
    #hintContent
    let-index="index"
    let-value
>
    <div>Vertical: {{ value[0] }}</div>
    <div>Horizontal: {{ value[1] }}</div>
    <div>index: {{ index }}</div>
</ng-template>

    

      
      
    

  
    
      .axes {
    block-size: 12.5rem;
    inline-size: 25rem;
    color: #bc71c9;
}

Several lines with hints 

    
      
    

      
      
    

  
    
      <tui-axes
    class="axes"
    [horizontalLines]="3"
    [tuiLineChartHint]="hint"
    [verticalLines]="5"
>
    @for (value of values; track value) {
        <tui-line-chart
            class="chart"
            [height]="200"
            [value]="value"
            [width]="400"
            [x]="0"
            [y]="0"
        />
    }
</tui-axes>

    

      
      
    

  
    
      .axes {
    block-size: 12.5rem;
    inline-size: 25rem;
}

.chart {
    position: absolute;
    color: #ffb74c;

    &:first-child {
        color: #bc71c9;
    }

    &:last-child {
        color: #4dc3f7;
    }
}
GitHub StackBlitz