/* ------------------------------------------------------------------------------
*
* # Chart styling
*
* Charts base - container and sizing setup
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Core
// ------------------------------
// Container
.chart-container {
position: relative;
width: 100%;
// Add scroll
&.has-scroll {
overflow-x: scroll;
overflow-y: visible;
max-width: 100%;
}
// Add scroll for all charts on mobile to hide overflow
@media (max-width: @screen-xs-max) {
overflow-x: scroll;
overflow-y: visible;
max-width: 100%;
}
}
// Chart itself
.chart {
position: relative;
display: block;
width: 100%;
// Give chart min width
&.has-minimum-width {
min-width: 600px;
}
}
// Give chart fixed height
.has-fixed-height {
height: 400px;
}
// Pie charts
.chart-pie {
width: 100%;
height: 400px;
min-width: 500px;
}