Charts.css

# Data Position

The position of the data in the chart can be controlled without changing the HTML markup.

# Position System

The framework offers several CSS utility classes which help customize the position of the data.

# Global Data Position

The data position supports the following classes:

  • .data-start - Inside the data block, near the primary axis, where the data begins.
  • .data-end - Inside the data block, away from the primary axis, where the data ends.
  • .data-center - Inside the data block, in the center of the data block.
  • .data-outside - Outside of the data block.

# Edge Cases

Furthermore, when you have a very low or a very heigh value on your bar and column charts, the data seems out of position. You can use utility classes added either to the <td> element.

  • .inside
  • .outside

# Change Data Position

To display the data at the start, use the .data-start class:

<table class="charts-css column data-start">
  ...
</table>
1
2
3
Data Position Example #1
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

To display the data at the center, use the .data-center class:

<table class="charts-css column data-center">
  ...
</table>
1
2
3
Data Position Example #2
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

To display the data at the end, use the .data-end class:

<table class="charts-css column data-end">
  ...
</table>
1
2
3
Data Position Example #3
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

To display the data outside of the data block, use the .data-outside class:

<table class="charts-css column data-outside">
  ...
</table>
1
2
3
Data Position Example #4
Month Progress
Jan 30
Feb 50
Mar 80
Apr 100
May 65
Jun 45
Jul 15
Aug 32
Sep 60
Oct 90
Nov 55
Dec 40
Open in:

# Edge Cases

Charts.css was build with CSS, therefore it inherits some CSS issues. For such cases, the framework offers utility classes that handle these display issues.

# Position Outside

A good example is when the data positioned at the end of the column, and some columns have small values which display them below the chart.

Data Position Example #5
Month Progress
Jan 0
Feb 1
Mar 2
Apr 3
May 4
Jun 5
Jul 6
Aug 7
Sep 8
Oct 9
Nov 10
Dec 100
Open in:

To fix this, use the .outside utility class as follows:

 



 





<table class="charts-css column data-end">
  ...
  <tbody>
      <tr>
          <td style="--size: 0;"> <span class="data outside"> 0 </span> </td>
      </tr>
  </tbody>
  ...
</table>
1
2
3
4
5
6
7
8
9
Data Position Example #6
Month Progress
Jan 0
Feb 1
Mar 2
Apr 3
May 4
Jun 5
Jul 6
Aug 7
Sep 8
Oct 9
Nov 10
Dec 100
Open in:

# Position Inside

Another good example is when the data positioned outside the column, and some columns have large values which display them outside of the chart.

Data Position Example #7
Month Progress
Jan 100
Feb 99
Mar 98
Apr 97
May 96
Jun 95
Jul 94
Aug 93
Sep 92
Oct 91
Nov 50
Dec 0
Open in:

To fix this, use the .inside utility class as follows:

 



 





<table class="charts-css column data-outside">
  ...
  <tbody>
      <tr>
          <td style="--size: 0;"> <span class="data inside"> 0 </span> </td>
      </tr>
  </tbody>
  ...
</table>
1
2
3
4
5
6
7
8
9
Data Position Example #8
Month Progress
Jan 100
Feb 99
Mar 98
Apr 97
May 96
Jun 95
Jul 94
Aug 93
Sep 92
Oct 91
Nov 50
Dec 0
Open in:

← Labels →