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

Highchart ENGIE light theme

  const lightTheme = Highcharts.theme = {
    colors: ['#0b74c0', '#fbdb3c', '#6ed2b1', '#552382',],
    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'
      }
    }
  };
  

Highchart ENGIE dark theme

  const darkTheme = Highcharts.theme = {
    colors: ['#0b74c0', '#fbdb3c', '#6ed2b1', '#552382',],
    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'
      }
    }
  };