Sezione 4 Grafici

La componente grafici può essere utilizzata in qualsiasi contesto, non solo dentro i widget. Il tooltip che compare all'hover può essere personalizzato per tipologia di dati mostrati.

Tutti i grafici devono avere un attributo id="" univoco.

È possibile specificare l'attributo data-chart-palette tramite il quale si definisce il colore dominante del grafico.

I possibili valori sono:

  • data-chart-palette="index:X" per i grafici andamento e andamento pieno;
  • data-chart-palette="column:X" per il grafico a colonne;
  • data-chart-palette="pie:X" per il grafico a torta.

La X è un valore da 1 a 8 relativo alla palette definita.

Se l'attributo non è specificato viene preso il colore di default e, nel caso di grafici con colori multipli (grafico a torta), sono utilizzati tutti i colori della palette in sequenza.

Sezione 4.1 Grafico andamento

Nel secondo grafico è stato utilizzato data-chart-palette="index:3" ovvero colore numero 3 della palette.

Stili default

Markup
<div class="c-highchart" data-chart id="chart_dashboard_singolo_conto_12"></div>
<div class="c-highchart" data-chart data-chart-palette="index:3" id="chart_dashboard_singolo_conto_34"></div>

Nel secondo grafico è stato utilizzato data-chart-palette="index:4" ovvero colore numero 4 della palette.

Stili default

Markup
<div class="c-highchart" data-chart id="chart_dashboard_singolo_conto_area_12"></div>
<div class="c-highchart" data-chart data-chart-palette="index:4" id="chart_dashboard_singolo_conto_area_34"></div>

Sezione 4.3 Grafico a colonne

Nel secondo grafico è stato utilizzato data-chart-palette="columns:2" ovvero colore numero 2 della palette.

Stili default

Markup
<div class="c-highchart" data-chart id="chart_dashboard_entrate_uscite_12"></div>
<div class="c-highchart" data-chart data-chart-palette="columns:2" id="chart_dashboard_entrate_uscite_34"></div>

Sezione 4.4 Grafico a torta

Nel secondo grafico è stato utilizzato data-chart-palette="pie:1" ovvero colore numero 1 della palette.

Stili default

Markup
<div class="c-highchart" data-chart id="chart_dashboard_patrimonio_12"></div>
<div class="c-highchart" data-chart data-chart-palette="pie:1" id="chart_dashboard_patrimonio_34"></div>

Sezione 4.5 Charts

Deprecated: versione precedente dei grafici e sostituita con alla componente c-highcharts.