On This Page

A Chart.js wrapper.

  • Fluent
  • Declarative

     Chart.builder()
          .chartType(ChartType.line)
          .chartData(ChartData.builder()
                  .labels(List.of("uno", "dos", "tres", "cuatro"))
                  .datasets(List.of(ChartDataset.builder()
                                  .label("label 1")
                                  .data(List.of(1d, 2d, 3d, 4d))
                          .build()))
                  .build())
          .chartOptions(ChartOptions.builder()
                  .maintainAspectRatio(false)
                  .scales(ChartScales.builder()
                          .y(ChartAxisScale.builder()
                                  .beginAtZero(true)
                                  .build())
                          .build())
                  .build())
          .build()
copy

There is no declarative way of defining a chart. Just use the fluent version.

Available properties

This is the list of available properties for a chart:

PropertyDescriptionNotes
idid for this component
cssClasseslist of css classescontent of the css attribute
styleinline style attributescontent of the style attribute
fullWidthshortcut to set width:100%true/false
chartTypeOne of bar, line, scatter, polarArea, bubble, pie, doughnut, radar
chartDataChart data according to https://www.chartjs.org/docs/latest/general/data-structures.html
chartOptionsChart options according to https://www.chartjs.org/docs/latest/general/options.html

You can see a full explanation of those properties at https://github.com/FabricElements/skeleton-carousel