graphieros
commented
2 weeks ago 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>
just like this
I want to change the circle inner color to be white