How can I change the inner color of the shape?

[Sharang-heng]

just like this

I want to change the circle inner color to be white

[graphieros]

Hi @Sharang-heng

You can upgrade to v2.3.88 which adds config options to achieve this effect.

Here is a sample component you can copy paste to get this config:

<script setup>
    import { ref } from "vue";
    import { VueUiXy } from "vue-data-ui";
    import "vue-data-ui/style.css"
    
    const config = ref({
  "theme": "",
  "responsive": false,
  "customPalette": [],
  "useCssAnimation": true,
  "chart": {
    "fontFamily": "inherit",
    "backgroundColor": "#FFFFFFff",
    "color": "#1A1A1Aff",
    "height": 600,
    "width": 1000,
    "zoom": {
      "show": true,
      "color": "#CCCCCCff",
      "highlightColor": "#4A4A4A",
      "fontSize": 14,
      "useResetSlot": false,
      "minimap": {
        "show": true,
        "smooth": true,
        "selectedColor": "#1F77B4",
        "selectedColorOpacity": 0.2,
        "lineColor": "#1A1A1A",
        "selectionRadius": 2,
        "indicatorColor": "#1A1A1A"
      }
    },
    "padding": {
      "top": 36,
      "right": 24,
      "bottom": 64,
      "left": 48
    },
    "highlighter": {
      "color": "#1A1A1Aff",
      "opacity": 5,
      "useLine": false,
      "lineDasharray": 2,
      "lineWidth": 1
    },
    "highlightArea": {
      "show": false,
      "from": 0,
      "to": 0,
      "color": "#1A1A1Aff",
      "opacity": 20,
      "caption": {
        "text": "Caption",
        "fontSize": 20,
        "color": "#1A1A1Aff",
        "bold": false,
        "offsetY": 0,
        "width": "auto",
        "padding": 3,
        "textAlign": "center"
      }
    },
    "timeTag": {
      "show": false,
      "backgroundColor": "#e1e5e8ff",
      "color": "#1A1A1Aff",
      "fontSize": 12,
      "circleMarker": {
        "radius": 3,
        "color": "#1A1A1Aff"
      }
    },
    "grid": {
      "stroke": "#e1e5e8ff",
      "showVerticalLines": false,
      "showHorizontalLines": false,
      "position": "middle",
      "frame": {
        "show": false,
        "stroke": "#E1E5E8ff",
        "strokeWidth": 2,
        "strokeLinecap": "round",
        "strokeLinejoin": "round",
        "strokeDasharray": 0
      },
      "labels": {
        "show": true,
        "color": "#1A1A1Aff",
        "fontSize": 12,
        "axis": {
          "yLabel": "",
          "yLabelOffsetX": 0,
          "xLabel": "",
          "xLabelOffsetY": 14,
          "fontSize": 12
        },
        "zeroLine": {
          "show": true
        },
        "xAxis": {
          "showBaseline": true
        },
        "yAxis": {
          "showBaseline": true,
          "commonScaleSteps": 10,
          "useIndividualScale": false,
          "stacked": false,
          "gap": 12,
          "labelWidth": 40,
          "formatter": null,
          "scaleMin": null,
          "scaleMax": null
        },
        "xAxisLabels": {
          "color": "#1A1A1Aff",
          "show": true,
          "values": [
            "T0",
            "T1",
            "T2",
            "T3",
            "T4",
            "T5",
            "T6"
          ],
          "fontSize": 18,
          "showOnlyFirstAndLast": false,
          "showOnlyAtModulo": false,
          "modulo": 12,
          "yOffset": 33,
          "rotation": 0
        }
      }
    },
    "comments": {
      "show": true,
      "showInTooltip": true,
      "width": 200,
      "offsetX": 0,
      "offsetY": 0
    },
    "labels": {
      "fontSize": 21,
      "prefix": "",
      "suffix": ""
    },
    "legend": {
      "color": "#1A1A1Aff",
      "show": true,
      "fontSize": 16
    },
    "title": {
      "text": "Title",
      "color": "#1A1A1Aff",
      "fontSize": 20,
      "bold": true,
      "textAlign": "center",
      "paddingLeft": 0,
      "paddingRight": 0,
      "subtitle": {
        "color": "#CCCCCCff",
        "text": "",
        "fontSize": 16,
        "bold": false
      },
      "show": true
    },
    "tooltip": {
      "show": true,
      "color": "#1A1A1Aff",
      "backgroundColor": "#FFFFFFff",
      "fontSize": 14,
      "customFormat": null,
      "borderRadius": 4,
      "borderColor": "#e1e5e8",
      "borderWidth": 1,
      "backgroundOpacity": 30,
      "position": "center",
      "offsetY": 24,
      "showValue": true,
      "showPercentage": false,
      "roundingValue": 0,
      "roundingPercentage": 0
    },
    "userOptions": {
      "show": true,
      "position": "right",
      "buttons": {
        "tooltip": true,
        "pdf": true,
        "csv": true,
        "img": true,
        "table": true,
        "labels": true,
        "fullscreen": true,
        "sort": false,
        "stack": true,
        "animation": false
      },
      "buttonTitles": {
        "open": "Open options",
        "close": "Close options",
        "tooltip": "Toggle tooltip",
        "pdf": "Download PDF",
        "csv": "Download CSV",
        "img": "Download PNG",
        "table": "Toggle table",
        "labels": "Toggle labels",
        "fullscreen": "Toggle fullscreen",
        "stack": "Toggle stack mode"
      }
    }
  },
  "bar": {
    "borderRadius": 2,
    "useGradient": true,
    "periodGap": 0.1,
    "border": {
      "useSerieColor": false,
      "strokeWidth": 1,
      "stroke": "#FFFFFFff"
    },
    "labels": {
      "show": true,
      "offsetY": -8,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    },
    "serieName": {
      "show": false,
      "offsetY": -6,
      "useAbbreviation": true,
      "abbreviationSize": 3,
      "useSerieColor": true,
      "color": "#1A1A1Aff",
      "bold": false
    }
  },
  "line": {
    "radius": 11,
    "useGradient": false,
    "strokeWidth": 3,
    "dot": {
      "useSerieColor": false,
      "fill": "#FFFFFF",
      "strokeWidth": 3.0000000000000013
    },
    "labels": {
      "show": true,
      "offsetY": -10,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    },
    "area": {
      "useGradient": true,
      "opacity": 20
    }
  },
  "plot": {
    "radius": 6,
    "useGradient": true,
    "dot": {
      "useSerieColor": true,
      "fill": "#FFFFFF",
      "strokeWidth": 0.5
    },
    "labels": {
      "show": true,
      "offsetY": -8,
      "rounding": 0,
      "color": "#1A1A1Aff",
      "formatter": null
    }
  },
  "table": {
    "responsiveBreakpoint": 400,
    "rounding": 0,
    "sparkline": true,
    "showSum": true,
    "columnNames": {
      "period": "Period",
      "total": "Total"
    },
    "th": {
      "backgroundColor": "#FAFAFAff",
      "color": "#1A1A1Aff",
      "outline": ""
    },
    "td": {
      "backgroundColor": "#FAFAFAff",
      "color": "#1A1A1Aff",
      "outline": ""
    }
  },
  "showTable": false
});
    
    
    const dataset = ref([
  {
    "name": "name",
    "series": [
      0,
      0,
      0,
      100,
      0,
      0,
      0
    ],
    "color": "#6376DD",
    "type": "line",
    "shape": "circle",
    "useArea": false,
    "useProgression": false,
    "dataLabels": true,
    "smooth": true,
    "dashed": false,
    "useTag": "none"
  }
]);
    
</script>

<template>
    <div style="width:600px">
        <VueUiXy :config="config" :dataset="dataset" />
    </div>
</template>