Charts Resources

The data-visualization pages will soon be updated.

If you are currently working on data visualization and need some additional expertise, please reach out to us directly through the Teams Channel .

Designers

Figma Chart plugin

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.

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'
      }
    }
  };