Title
How to configure series zIndex in common chart?
Description
How to configure the combination chart hierarchy? When combining line and area series, the point primitive of line is obscured by the area primitive
Solution
For the cascading style of series in the combination diagram, it can be controlled by the declaration order of series. For example, if the line series needs to be above the area series, then the area series needs to be declared first, and then the line series needs to be declared.
Code Example
const data = [ { date: "2023-12-01", value: "1776", series: "demand" }, { date: "2023-12-01", value: 1546, series: "left" }, { date: "2023-12-01", value: "3322", series: "total" }, { date: "2023-12-02", value: "3555", series: "demand" }, { date: "2023-12-02", value: 43638, series: "left" }, { date: "2023-12-02", value: "47193", series: "total" }, { date: "2023-12-03", value: "52840", series: "demand" }, { date: "2023-12-03", value: 6864, series: "left" }, { date: "2023-12-03", value: "59704", series: "total" }, { date: "2023-12-04", value: "48566", series: "demand" }, { date: "2023-12-04", value: 41413, series: "left" }, { date: "2023-12-04", value: "89979", series: "total" }, { date: "2023-12-05", value: "17711", series: "demand" }, { date: "2023-12-05", value: 26783, series: "left" }, { date: "2023-12-05", value: "44494", series: "total" }, { date: "2023-12-06", value: "4295", series: "demand" }, { date: "2023-12-06", value: 363, series: "left" }, { date: "2023-12-06", value: "4658", series: "total" }, { date: "2023-12-07", value: "16", series: "demand" }, { date: "2023-12-07", value: 8757, series: "left" }, { date: "2023-12-07", value: "8773", series: "total" }, { date: "2023-12-08", value: "29228", series: "demand" }, { date: "2023-12-08", value: 29999, series: "left" }, { date: "2023-12-08", value: "59227", series: "total" }, { date: "2023-12-09", value: "29092", series: "demand" }, { date: "2023-12-09", value: 15516, series: "left" }, { date: "2023-12-09", value: "44608", series: "total" }, { date: "2023-12-010", value: "4098", series: "demand" }, { date: "2023-12-010", value: 4946, series: "left" }, { date: "2023-12-010", value: "9044", series: "total" }, { date: "2023-12-011", value: "11611", series: "demand" }, { date: "2023-12-011", value: 64795, series: "left" }, { date: "2023-12-011", value: "76406", series: "total" }, { date: "2023-12-012", value: "72517", series: "demand" }, { date: "2023-12-012", value: 11808, series: "left" }, { date: "2023-12-012", value: "84325", series: "total" }, { date: "2023-12-013", value: "15421", series: "demand" }, { date: "2023-12-013", value: 16839, series: "left" }, { date: "2023-12-013", value: "32260", series: "total" }, { date: "2023-12-014", value: "5185", series: "demand" }, { date: "2023-12-014", value: 18225, series: "left" }, { date: "2023-12-014", value: "23410", series: "total" }, { date: "2023-12-015", value: "9034", series: "demand" }, { date: "2023-12-015", value: 35726, series: "left" }, { date: "2023-12-015", value: "44760", series: "total" }, { date: "2023-12-016", value: "20138", series: "demand" }, { date: "2023-12-016", value: 42747, series: "left" }, { date: "2023-12-016", value: "62885", series: "total" }, { date: "2023-12-017", value: "1649", series: "demand" }, { date: "2023-12-017", value: 6281, series: "left" }, { date: "2023-12-017", value: "7930", series: "total" }, { date: "2023-12-018", value: "3687", series: "demand" }, { date: "2023-12-018", value: 5087, series: "left" }, { date: "2023-12-018", value: "8774", series: "total" }, { date: "2023-12-019", value: "49861", series: "demand" }, { date: "2023-12-019", value: 14074, series: "left" }, { date: "2023-12-019", value: "63935", series: "total" }, { date: "2023-12-020", value: "4386", series: "demand" }, { date: "2023-12-020", value: 33871, series: "left" }, { date: "2023-12-020", value: "38257", series: "total" }, { date: "2023-12-021", value: "5066", series: "demand" }, { date: "2023-12-021", value: 34438, series: "left" }, { date: "2023-12-021", value: "39504", series: "total" }, { date: "2023-12-022", value: "3070", series: "demand" }, { date: "2023-12-022", value: 47549, series: "left" }, { date: "2023-12-022", value: "50619", series: "total" }, { date: "2023-12-023", value: "7493", series: "demand" }, { date: "2023-12-023", value: 83660, series: "left" }, { date: "2023-12-023", value: "91153", series: "total" }, { date: "2023-12-024", value: "40735", series: "demand" }, { date: "2023-12-024", value: 8841, series: "left" }, { date: "2023-12-024", value: "49576", series: "total" }, { date: "2023-12-025", value: "15730", series: "demand" }, { date: "2023-12-025", value: 8965, series: "left" }, { date: "2023-12-025", value: "24695", series: "total" }, { date: "2023-12-026", value: "64354", series: "demand" }, { date: "2023-12-026", value: 31912, series: "left" }, { date: "2023-12-026", value: "96266", series: "total" }, { date: "2023-12-027", value: "15469", series: "demand" }, { date: "2023-12-027", value: 28519, series: "left" }, { date: "2023-12-027", value: "43988", series: "total" }, { date: "2023-12-028", value: "249", series: "demand" }, { date: "2023-12-028", value: 7200, series: "left" }, { date: "2023-12-028", value: "7449", series: "total" }, { date: "2023-12-029", value: "9296", series: "demand" }, { date: "2023-12-029", value: 26689, series: "left" }, { date: "2023-12-029", value: "35985", series: "total" }, { date: "2023-12-030", value: "4776", series: "demand" }, { date: "2023-12-030", value: 368, series: "left" }, { date: "2023-12-030", value: "5144", series: "total" }, { date: "2023-12-031", value: "50932", series: "demand" }, { date: "2023-12-031", value: 2237, series: "left" }, { date: "2023-12-031", value: "53169", series: "total" }, { date: "2023-12-032", value: "12191", series: "demand" }, { date: "2023-12-032", value: 45954, series: "left" }, { date: "2023-12-032", value: "58145", series: "total" }, { date: "2023-12-033", value: "1615", series: "demand" }, { date: "2023-12-033", value: 57757, series: "left" }, { date: "2023-12-033", value: "59372", series: "total" }, { date: "2023-12-034", value: "16892", series: "demand" }, { date: "2023-12-034", value: 23399, series: "left" }, { date: "2023-12-034", value: "40291", series: "total" }, { date: "2023-12-035", value: "12452", series: "demand" }, { date: "2023-12-035", value: 2427, series: "left" }, { date: "2023-12-035", value: "14879", series: "total" }, { date: "2023-12-036", value: "86059", series: "demand" }, { date: "2023-12-036", value: 8673, series: "left" }, { date: "2023-12-036", value: "94732", series: "total" }, { date: "2023-12-037", value: "1355", series: "demand" }, { date: "2023-12-037", value: 23182, series: "left" }, { date: "2023-12-037", value: "24537", series: "total" }, { date: "2023-12-038", value: "6865", series: "demand" }, { date: "2023-12-038", value: 26607, series: "left" }, { date: "2023-12-038", value: "33472", series: "total" }, { date: "2023-12-039", value: "63665", series: "demand" }, { date: "2023-12-039", value: 11211, series: "left" }, { date: "2023-12-039", value: "74876", series: "total" }, { date: "2023-12-040", value: "14291", series: "demand" }, { date: "2023-12-040", value: 62592, series: "left" }, { date: "2023-12-040", value: "76883", series: "total" }, { date: "2023-12-041", value: "13291", series: "demand" }, { date: "2023-12-041", value: 27065, series: "left" }, { date: "2023-12-041", value: "40356", series: "total" }, { date: "2023-12-042", value: "33858", series: "demand" }, { date: "2023-12-042", value: 11867, series: "left" }, { date: "2023-12-042", value: "45725", series: "total" }, ]; const spec = { type: "common", seriesField: "color", data: [ { id: "id0", values: data.filter((o) => o.series !== "total") }, { id: "id1", values: data.filter((o) => o.series === "total") }, ], series: [ { type: "area", id: "bar", dataIndex: 0, label: { visible: true }, dataIndex: 0, xField: "date", yField: "value", seriesField: "series", area: { zIndex: -1 }, line: { style: { lineDash: [2, 2], lineWidth: (data) => (data.series === "left" ? 0 : 1), }, }, dataZoom: { zIndex: 500 }, point: { style: { size: 0 }, state: { dimension_hover: { size: (data) => (data.series === "left" ? 0 : 8), }, }, }, label: { visible: false }, area: { style: { fillOpacity: (data) => (data.series === "left" ? 0.7 : 0.3), textureColor: "#fff", fill: (data) => (data.series === "left" ? "#bcc0cd" : "#1AC6FF"), textureSize: 4, texture: (data) => { if (data.series === "left") { return "bias-rl"; } return null; }, }, }, }, { type: "line", id: "line", dataIndex: 1, label: { visible: true }, seriesField: "series", xField: "date", yField: "value", stack: false, label: { visible: false }, dataZoom: { zIndex: 1000 }, line: { style: { lineDash: [2, 2], lineWidth: 1, }, }, point: { style: { size: 0 }, state: { dimension_hover: { size: 8 }, }, }, }, ], axes: [ { orient: "left", visible: false }, { orient: "right", visible: false }, { orient: "bottom", label: { visible: true }, type: "band" }, ], legends: { visible: true, orient: "bottom" }, }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); window['vchart'] = vchart; Results
Online demo：hhttps://codesandbox.io/p/sandbox/zindex-4dtk4g?file=%2Fsrc%2Findex.ts%3A4%2C1-217%2C5
Related Documentation
Common Chart Demo：https://www.visactor.io/vchart/demo/combination/single-region
Common Chart Tutorial：https://www.visactor.io/vchart/guide/tutorial\_docs/Chart\_Types/Combination
github：https://github.com/VisActor/VChart
Top comments (0)