Graph: fill type and line width support for area graph

[dammy001]

Fill types We should be able to configure the SVG paths by specifying whether to fill the paths with solid colors, gradients, or patterns.

Currently, the fill type is just solid colors. see this for example: https://codepen.io/apexcharts/pen/GQmoXP

[rokotyan]

This is supported via custom SVG defs, check out this example https://unovis.dev/docs/guides/tips-and-tricks#custom-fills-with-svg-defs

[dammy001]

@rokotyan i'm trying to achieve this using the area but it doesn't seem possible. Do you have any example regarding this?

[dammy001]

@rokotyan --vis-area-stroke-width: 5; doesn't seem to apply for area stroke width.

[rokotyan]

@dammy001 Try setting --vis-area-stroke-color along with --vis-area-stroke-width

[Niehaus]

I'm having this problem as well, settings stroke width and color produces not only the line stroke to be stronger. I tried other solutions but wasn't succeed

[Niehaus]

I made a work around by putting a VisLine after my VisArea and it worked well. I guess. The only detail is that the curveType has to be the same to get this effect.

      <VisLine<DataRecord>
        x={useCallback((d: DataRecord) => d.x, [])}
        y={[useCallback((d: DataRecord) => d.y, [])]}
        curveType={CurveType.Linear}
        color="#049499"
      />
      <VisArea
        y={[useCallback((d: DataRecord) => d.y, [])]}
        x={useCallback((d: DataRecord) => d.x, [])}
        curveType={CurveType.Linear}
        color="url(#gradient)"
      />

      <VisLine<DataRecord>
        x={useCallback((d: DataRecord) => d.x, [])}
        y={[useCallback((d: DataRecord) => d.w, [])]}
        curveType={CurveType.Linear}
        color="#DE3563"
      />
      <VisArea
        x={useCallback((d: DataRecord) => d.x, [])}
        y={[useCallback((d: DataRecord) => d.w, [])]}
        curveType={CurveType.Linear}
        color="url(#gradient2)"
      />