I found this thread cause I had the same problem as OP, but I get a big miffed when someone gets help, and doesn’t reply to something as simple as people asking nicely if OP might share his code for formatting his graphs. It’s a compliment to be asked, and a bit rude to ignore imo.
I’m a fairly avid user of Apex Charts, so I thought I’d throw together a quick explanation of how OP (likely) has formatted his graphs.
Starting from an apex chart with “stacked: true” on the main options, and then 4 series which are in order [ sun-energy, battery charge/discharge, grid, battery SoC ], with a double y-axis (one for kWh on the left, and one for SoC % on the right).
Then I’d guess all of the actual “styling” is done under apex_config, a quick example I threw together looks like this
type: custom:apexcharts-card
graph_span: 1d
span:
end: day
apex_config:
chart:
width: 100%
height: 300px
stroke:
dashArray:
- 0
- 0
- 0
- 5
dataLabels:
enabled: true
enabledOnSeries:
- 0
- 1
- 2
textAnchor: middle
style:
fontSize: 12px
fontWeight: bold
colors:
- '#f8f8ff'
background:
enabled: false
dropShadow:
enabled: true
plotOptions:
bar:
datalabels:
position: top,
hideoverflowinglabels: true
total:
enabled: false
fontSize: 14px
fontWeight: bold
style:
color: '#f8f8ff'
borderRadius:
- 10
- 10
- 10
columnWidth: 70%
fill:
type:
- gradient
- gradient
- gradient
- solid
colors:
- '#e6f900'
- '#0000f9'
- '#f93100'
gradient:
type: diagonal
inverseColors: false
shadeIntensity: 0.7
gradientToColors:
- '#f0ac00'
- '#00a8f0'
- '#c55942'
header:
show: true
show_states: true
colorize_states: true
stacked: true
yaxis:
- id: energy
min: ~5
max: ~5
- id: percent
min: 0
max: 100
opposite: true
series: ...
For more in-depth info on what can be added to apex_config it’s available here under “Options (Reference)”, just like RomRider mentions in the documentation.
A quick explanation of what part does what:
- stroke.dashArray: Makes the graph of a series dashed instead of solid. The higher the number for a series, the more spacing in between dashes. This is how the dashed line for SoC is created, we put 0 for the other series so they aren’t affected.
- dataLabels: Just some settings and styling for the datalabels, the important ones would be that it’s only enabled on the first 3 items of the series-array (first item in the array is number 0), which is how we “disable” it for SoC, and background.enabled = false, which is how we get rid of the box usually around datalabels.
- plotOptions.bar: Here’s some more styling for the datalabels, but also importantly “borderRadius”, which is what gives the data-columns their rounded edges. Higher number = more rounded edge. We also set the width of the columns to 70% of the available space (which is actually the default for pure Apex Charts).
- fill: Here we have the settings that give the shading color-tone, first we set type to “gradient” for the 3 bar-series, and to “solid” for the SoC-series.
Secondly we specify the hex-codes for the 3 series we wish to manipulate (I just set the SoC-color in it’s series-setting, since we’re not manipulating that, suboptimal for a teaching example, but I was more creating a PoC than a refined product here…), the color is the “starting” color, which will be in the upper left corner, then we state that the gradient should be diagonal to get the same effect as OP, and we set “gradientToColors” to the (again in order) colors we wish our 3 series of bars should fade into. “shadeIntensity” is how quickly the transition happens from 0 to 1, so 0.7 is basically 30% original color and 70% the color transitioned to.
That’s more or less it, again, my code is a quick PoC, especially the colors I didn’t spend a whole lot of time to match OP, I just took some close’ish ones. But that’s just hex-codes, easy to play around with until you find what you like.
Then it’s similar settings for the other graphs btw, but for line/area-graph, and pie-chart. All the info is in the apex charts webside I mentioned earlier. It’s not the most intuitive website to navigate, but the info that’s there is pretty good and comprehensive.
Anyway, hope this helps someone. 
