# Charts
Chart
component is a small wrapper for ChartJS (opens new window).
Note
By default ChartJS.defaults.global.legend.display
is set to false
in demo project
You don't need to use this component and if you want you can create your own custom chart components with different libraries.
In order to use Chart
component. Provide a ChartJS (opens new window) compatible configuration object
to config
prop. Optionally you can provide height
prop to define fixed height of chart.
# Example
Total sessions 54'965
Growth +27%
Sessions by month
Configuration object of above chart:
{
type: 'line',
data:{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets:[
{
data:[923,1032,1123,1211,1352,1936,1758,1801,1799,1965,2043,1876],
pointBorderColor:'#6246ea',
pointBackgroundColor:'#fff',
backgroundColor: 'rgba(98,70,234,0.1)',
borderColor: '#6246ea',
pointBorderWidth:2,
pointHoverBorderWidth:2,
pointHoverRadius:6,
pointRadius:4,
borderWidth:2,
},
{
data:[123,165,237,589,234, 121,90,211,298, 429, 685, 899],
pointBorderColor:'#4e4e4e',
pointBackgroundColor:'#fff',
backgroundColor: 'rgba(78,78,78,0.1)',
borderColor: '#4e4e4e',
pointBorderWidth:2,
pointHoverBorderWidth:2,
pointHoverRadius:6,
pointRadius:4,
borderWidth:2,
}
]
},
options:{
tooltips:{
mode:'nearest',
intersect: false,
displayColors:false,
callbacks:{
label(tooltipInterface, data){
return `${tooltipInterface.value} Sessions`;
},
// Title is
title(tooltipInterface, data){
tooltipInterface = tooltipInterface[0];
let year = (new Date).getFullYear() - (tooltipInterface.datasetIndex+1)*1;
return `${tooltipInterface.label} ${year}`;
}
}
},
scales:{
yAxes:[
{
gridLines:{
display:false,
},
ticks:{
beginAtZero:true,
}
}
]
}
}
}
# Props
name | required | type |
---|---|---|
config | true | Object |
height | false | Number |