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.
Nel secondo grafico è stato utilizzato data-chart-palette="index:3" ovvero colore numero 3 della palette.
Stili default
<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
<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>
Nel secondo grafico è stato utilizzato data-chart-palette="columns:2" ovvero colore numero 2 della palette.
Stili default
<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>
Nel secondo grafico è stato utilizzato data-chart-palette="pie:1" ovvero colore numero 1 della palette.
Stili default
<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>
Deprecated: versione precedente dei grafici e sostituita con alla componente c-highcharts.