Don't render points if there is no data

[Dmitrylolo]

Question

Guys, help me, please. I try not to render points if there is no data between several dates or time. But I see in the code that there is d3-scale's linear scaling present and it puts the data if it even not exists. I have straight lines between points

Background Info/Attempts

[zibs]

Hey @Dmitrylolo can you provide more details?

Is this screenshot what you want it to look like? Or what it looks like (but is wrong?)

If you can provide me some sample data/example chart I can hopefully take a look.

[Dmitrylolo]

@zibs
Here the example of data. There's no data at the weekends. This screenshot represents how it is now (yes it is wrong). I don't want these straight lines between points where no data
I've tried tickValues, but it not helping

[ { "date": 1732017600000, "value": 0.2252 }, { "date": 1732019400000, "value": 0.2248 }, { "date": 1732021200000, "value": 0.2199 }, { "date": 1732023000000, "value": 0.2225 }, { "date": 1732024800000, "value": 0.2252 }, { "date": 1732026600000, "value": 0.2228 }, { "date": 1732028400000, "value": 0.22 }, { "date": 1732030200000, "value": 0.22 }, { "date": 1732032000000, "value": 0.2207 }, { "date": 1732033800000, "value": 0.2198 }, { "date": 1732035600000, "value": 0.21955 }, { "date": 1732037400000, "value": 0.2216 }, { "date": 1732039200000, "value": 0.2232 }, { "date": 1732041000000, "value": 0.222 }, { "date": 1732042800000, "value": 0.22 }, { "date": 1732044600000, "value": 0.2175 }, { "date": 1732046400000, "value": 0.2163 }, { "date": 1732048200000, "value": 0.2158 }, { "date": 1732050000000, "value": 0.22 }, { "date": 1732051800000, "value": 0.2157 }, { "date": 1732055400000, "value": 0.22 }, { "date": 1732057200000, "value": 0.2178 }, { "date": 1732060800000, "value": 0.22 }, { "date": 1732062600000, "value": 0.2182 }, { "date": 1732096800000, "value": 0.224 }, { "date": 1732098600000, "value": 0.224 }, { "date": 1732100400000, "value": 0.2241 }, { "date": 1732102200000, "value": 0.2252 }, { "date": 1732104000000, "value": 0.2252 }, { "date": 1732105800000, "value": 0.2232 }, { "date": 1732107600000, "value": 0.2233 }, { "date": 1732109400000, "value": 0.2159 }, { "date": 1732111200000, "value": 0.2225 }, { "date": 1732113000000, "value": 0.208 }, { "date": 1732114800000, "value": 0.2075 }, { "date": 1732116600000, "value": 0.2059 }, { "date": 1732118400000, "value": 0.212 }, { "date": 1732120200000, "value": 0.21336 }, { "date": 1732122000000, "value": 0.2217 }, { "date": 1732123800000, "value": 0.2197 }, { "date": 1732125600000, "value": 0.2159 }, { "date": 1732127400000, "value": 0.2132 }, { "date": 1732129200000, "value": 0.21 }, { "date": 1732131000000, "value": 0.2216 }, { "date": 1732132800000, "value": 0.2274 }, { "date": 1732134600000, "value": 0.22685 }, { "date": 1732136400000, "value": 0.2257 }, { "date": 1732138200000, "value": 0.22 }, { "date": 1732140000000, "value": 0.2274 }, { "date": 1732141800000, "value": 0.2274 }, { "date": 1732143600000, "value": 0.2201 }, { "date": 1732145400000, "value": 0.2222 }, { "date": 1732147200000, "value": 0.2223 }, { "date": 1732149000000, "value": 0.2274 }, { "date": 1732179600000, "value": 0.22 }, { "date": 1732181400000, "value": 0.2163 }, { "date": 1732183200000, "value": 0.2166 }, { "date": 1732185000000, "value": 0.2158 }, { "date": 1732186800000, "value": 0.224 }, { "date": 1732190400000, "value": 0.2239 }, { "date": 1732192200000, "value": 0.218 }, { "date": 1732194000000, "value": 0.21 }, { "date": 1732195800000, "value": 0.2297 }, { "date": 1732197600000, "value": 0.2278 }, { "date": 1732199400000, "value": 0.2065 }, { "date": 1732201200000, "value": 0.2062 }, { "date": 1732203000000, "value": 0.2083 }, { "date": 1732204800000, "value": 0.2068 }, { "date": 1732206600000, "value": 0.2096 }, { "date": 1732208400000, "value": 0.2064 }, { "date": 1732210200000, "value": 0.2064 }, { "date": 1732212000000, "value": 0.2067 }, { "date": 1732213800000, "value": 0.21 }, { "date": 1732215600000, "value": 0.2111 }, { "date": 1732217400000, "value": 0.211 }, { "date": 1732219200000, "value": 0.2127 }, { "date": 1732221000000, "value": 0.2124 }, { "date": 1732222800000, "value": 0.2071 }, { "date": 1732224600000, "value": 0.2098 }, { "date": 1732226400000, "value": 0.2055 }, { "date": 1732228200000, "value": 0.209 }, { "date": 1732230000000, "value": 0.2075 }, { "date": 1732231800000, "value": 0.209 }, { "date": 1732233600000, "value": 0.209 }, { "date": 1732235400000, "value": 0.2091 }, { "date": 1732266000000, "value": 0.2124 }, { "date": 1732271400000, "value": 0.2 }, { "date": 1732273200000, "value": 0.2 }, { "date": 1732276800000, "value": 0.2001 }, { "date": 1732278600000, "value": 0.2031 }, { "date": 1732280400000, "value": 0.2093 }, { "date": 1732282200000, "value": 0.2139 }, { "date": 1732284000000, "value": 0.2055 }, { "date": 1732285800000, "value": 0.2071 }, { "date": 1732287600000, "value": 0.2058 }, { "date": 1732289400000, "value": 0.2021 }, { "date": 1732291200000, "value": 0.204899 }, { "date": 1732293000000, "value": 0.2014 }, { "date": 1732294800000, "value": 0.2024 }, { "date": 1732296600000, "value": 0.2023 }, { "date": 1732298400000, "value": 0.2051 }, { "date": 1732300200000, "value": 0.2047 }, { "date": 1732302000000, "value": 0.2023 }, { "date": 1732303800000, "value": 0.2048 }, { "date": 1732305600000, "value": 0.2071 }, { "date": 1732307400000, "value": 0.2068 }, { "date": 1732309200000, "value": 0.2139 }, { "date": 1732311000000, "value": 0.2075 }, { "date": 1732312800000, "value": 0.21 }, { "date": 1732314600000, "value": 0.215 }, { "date": 1732316400000, "value": 0.2075 }, { "date": 1732318200000, "value": 0.2081 }, { "date": 1732525200000, "value": 0.2075 }, { "date": 1732527000000, "value": 0.2075 }, { "date": 1732528800000, "value": 0.2124 }, { "date": 1732534200000, "value": 0.2128 }, { "date": 1732536000000, "value": 0.2103 }, { "date": 1732539600000, "value": 0.2122 }, { "date": 1732541400000, "value": 0.215 }, { "date": 1732543200000, "value": 0.21 }, { "date": 1732545000000, "value": 0.197 }, { "date": 1732546800000, "value": 0.2 }, { "date": 1732548600000, "value": 0.1999 }, { "date": 1732550400000, "value": 0.2001 }, { "date": 1732552200000, "value": 0.1973 }, { "date": 1732554000000, "value": 0.1984 }, { "date": 1732555800000, "value": 0.2009 }, { "date": 1732557600000, "value": 0.198499 }, { "date": 1732559400000, "value": 0.197 }, { "date": 1732561200000, "value": 0.2 }, { "date": 1732563000000, "value": 0.201 }, { "date": 1732564800000, "value": 0.203 }, { "date": 1732566600000, "value": 0.2068 }, { "date": 1732568400000, "value": 0.1995 }, { "date": 1732570200000, "value": 0.21 }, { "date": 1732572000000, "value": 0.2065 }, { "date": 1732573800000, "value": 0.2071 }, { "date": 1732575600000, "value": 0.207 }, { "date": 1732577400000, "value": 0.207 }, { "date": 1732579200000, "value": 0.2085 }, { "date": 1732581000000, "value": 0.21 }, { "date": 1732613400000, "value": 0.1999 }, { "date": 1732615200000, "value": 0.2003 }, { "date": 1732622400000, "value": 0.2005 }, { "date": 1732626000000, "value": 0.2087 }, { "date": 1732627800000, "value": 0.2087 }, { "date": 1732629600000, "value": 0.2035 }, { "date": 1732631400000, "value": 0.2142 }, { "date": 1732633200000, "value": 0.215 }, { "date": 1732635000000, "value": 0.2191 }, { "date": 1732636800000, "value": 0.22 }, { "date": 1732638600000, "value": 0.234487 }, { "date": 1732640400000, "value": 0.2364 }, { "date": 1732642200000, "value": 0.2281 }, { "date": 1732644000000, "value": 0.23 }, { "date": 1732645800000, "value": 0.234 }, { "date": 1732647600000, "value": 0.231001 }, { "date": 1732649400000, "value": 0.225 }, { "date": 1732651200000, "value": 0.218 } ]

[zibs]

@Dmitrylolo
Is something like this:

more of what you're after?

If so, what you could do is find a way to slice the lines up at the breaks and render separate line components per break like so:

    <Line
                points={points.value.slice(0, 112)}
                curveType={curveType}
                color={"green"}
                strokeWidth={strokeWidth}
                animate={{ type: "spring" }}
              />
              <Line
                points={points.value.slice(113)}
                curveType={curveType}
                color={"green"}
                strokeWidth={strokeWidth}
                animate={{ type: "spring" }}
              />

[Dmitrylolo]

@zibs Hi, thanks for the help, but here are no dates between 22 and 25 November. The X-axis should be 21, 22 nov, then 25 nov

[zibs]

I think you could experiment with having custom tick values in that case? I think I don't understand how you want your chart to look haha. Maybe draw it out roughly or something for me?

[Dmitrylolo]

Yes, I can even give you an example. If you open the Stocks application on your iPhone, then choose any ticker and choose 1w. You will see that there are no weekends in this chart. I need something like that.

I've tried with custom ticks, but there is a downsampleTicks function that doesn't allow me to render like this. Or xScale if I'm not passing the tick values.

[keithluchtel]

@Dmitrylolo How is your data formatted? You should be able to do something like the following to get the chart to appear how you want:

const DATA = [
  { day: "20 Nov", high: 50 + 20 * Math.random() },
  { day: "21 Nov", high: 50 + 20 * Math.random() },
  { day: "24 Nov", high: 50 + 20 * Math.random() },
  { day: "25 Nov", high: 50 + 20 * Math.random() },
  { day: "26 Nov", high: 50 + 20 * Math.random() },
];