Charts Resources
Designers
Developers
There are several libray you may use for data visualization.
At ENGIE, we recommend you to use Highcharts library for data visualization since we are providing a theme configuration.
ENGIE Highcharts themes
Highcharts ENGIE light theme
const lightTheme = Highcharts.theme = {
colors: ['#005AA0', '#A4853E', '#88DAD8', '#BD5A21', '#B6CDF8', '#0A6361'],
chart: {
backgroundColor: {
color: '#fff'
},
style: {
fontFamily: 'Lato, Verdana, sans-serif'
},
},
series:{
line:{
lineWidth: 10
}
},
title: {
align: 'left',
y: 10,
margin: 48,
style: {
color: '#212121',
fontSize: '24px',
}
},
subtitle: {
align: 'left',
y: 36,
style: {
color: '#757575',
fontSize: '16px',
}
},
plotOptions: {
pie: {
dataLabels: {
color: '#757575',
},
}
},
xAxis: {
title: {
margin: 32,
style: {
color: '#212121',
fontSize: '14px',
}
},
labels: {
y: 30,
style: {
color: '#757575',
fontSize: '14px',
fontWeight: '300'
}
},
gridLineColor: '#eeeeee',
lineColor: '#eeeeee',
lineWidth: 2,
tickColor: '#eeeeee',
tickLength: 8,
tickWidth: 2,
},
yAxis: {
title: {
margin: 32,
style: {
color: '#212121',
fontSize: '14px',
}
},
labels: {
style: {
color: '#757575',
fontSize: '14px',
fontWeight: '300'
}
},
gridLineColor: '#eeeeee',
lineColor: '#eeeeee',
},
tooltip: {
backgroundColor: '#0f1e29',
borderColor: 'none',
shadow: false,
borderRadius: 2,
borderWidth: 0,
style: {
color: '#fff',
fontSize: '12px',
},
color: '#fff',
},
legend: {
align: 'left',
itemStyle: {
fontSize: '14px',
fontWeight: '400',
color: '#757575'
},
itemHoverStyle: {
color: 'gray'
},
margin: 32
},
credits: {
enabled: false
},
navigation: {
menuStyle: {
background: 'white',
border: 'none',
boxShadow: '0 1px 5px 0 rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.06), 0 3px 1px -2px rgba(0,0,0,.06)'
},
menuItemStyle: {
background: 'none',
color: 'black',
fontFamily: 'Lato, Verdana, sans-serif'
},
menuItemHoverStyle: {
background: '#F5F5F5',
color: 'black'
}
}
};
Highcharts ENGIE dark theme
const darkTheme = Highcharts.theme = {
colors: ['#005AA0', '#A4853E', '#88DAD8', '#BD5A21', '#B6CDF8', '#0A6361'],
chart: {
backgroundColor: {
color: '#fff'
},
style: {
fontFamily: 'Lato, Verdana, sans-serif'
},
},
series:{
line:{
lineWidth: 10
}
},
title: {
align: 'left',
y: 10,
margin: 48,
style: {
color: '#E0E0E0',
fontSize: '24px',
}
},
subtitle: {
align: 'left',
y: 36,
style: {
color: '#758590',
fontSize: '16px',
}
},
plotOptions: {
pie: {
dataLabels: {
color: '#B8BFC3',
style: {
textOutline: false
}
},
borderColor: 'none',
},
column: {
borderColor: 'none'
},
bar: {
borderColor: 'none'
},
area: {
label: {
style: {
color:'#000000'
}
}
}
},
xAxis: {
title: {
margin: 32,
style: {
color: '#E0E0E0',
fontSize: '14px',
}
},
labels: {
y: 30,
style: {
color: '#758590',
fontSize: '14px',
fontWeight: '300'
}
},
gridLineColor: '#304759',
lineColor: '#304759',
lineWidth: 2,
tickColor: '#304759',
tickLength: 8,
tickWidth: 2,
},
yAxis: {
title: {
margin: 32,
style: {
color: '#E0E0E0',
fontSize: '14px',
}
},
labels: {
style: {
color: '#758590',
fontSize: '14px',
fontWeight: '300'
}
},
gridLineColor: '#304759',
lineColor: '#eeeeee',
},
tooltip: {
backgroundColor: '#0f1e29',
borderColor: 'none',
shadow: false,
borderRadius: 2,
borderWidth: 0,
style: {
color: '#fff',
fontSize: '12px',
},
color: '#fff',
},
legend: {
align: 'left',
itemStyle: {
fontSize: '14px',
fontWeight: '400',
color: '#757575'
},
itemHoverStyle: {
color: 'gray'
},
margin: 32
},
credits: {
enabled: false
},
navigation: {
menuStyle: {
background: 'white',
border: 'none',
boxShadow: '0 1px 5px 0 rgba(0,0,0,.1), 0 2px 2px 0 rgba(0,0,0,.06), 0 3px 1px -2px rgba(0,0,0,.06)'
},
menuItemStyle: {
background: 'none',
color: 'black',
fontFamily: 'Lato, Verdana, sans-serif'
},
menuItemHoverStyle: {
background: '#F5F5F5',
color: 'black'
}
}
};