Template talk:Graph:Chart/Archive 3

Crowding of x-axis labels
Is there a solution for easing the crowding of x-axis labels on the bottoms of charts with many entries? I don't want the chart to be overly wide or else some users may have to use horizontal scrolling to see it all. Is there a way to skip every [X_number] of labels? -- Veggies (talk) 13:27, 7 May 2020 (UTC)


 * It can be done "automatically" but unfortunately doesn't work for bar chart. There's bug in Graph:Chart module or deeper in Extension:Graph. It was already mentioned in this talk. To make it work you need to change "type" to "line" or "area" and add option "xType = date".


 * --Pietrasagh (talk) 19:51, 9 May 2020 (UTC)
 * --Pietrasagh (talk) 19:51, 9 May 2020 (UTC)


 * *** So xType=date never be able to work with type=rect ??? 185.66.252.215 (talk) 07:24, 16 June 2020 (UTC)
 * It's unfortunately complicated. There was long discussion about it between User:Yurik and Vega developers at a time of Vega 2.0. Since we still have old "guts" of Vega on Wikimedia problem remains. There is kind of workaround but in current version of Module:Graph you will loose possibility to use option  . You can use   and
 * Pietrasagh (talk) 05:44, 5 August 2020 (UTC)
 * Pietrasagh (talk) 05:44, 5 August 2020 (UTC)

xType = date makes the values disappear
I am trying to do what is suggested above with this graph:

Daily cases for the most infected African countries:

However, adding "|xType = date", as suggested above, makes everything disappear. What am I doing wrong?


 * Interesting, no matter how many times I previewed the page, the graph was blank. Having actually submitted it, it works as expected. Leaving this here in case someone else has the same issue. Greenman (talk) 21:48, 20 May 2020 (UTC)
 * That is still true on 22 may 2020
 * Having same problem. I think this is something to do with preview being a 'canvas element' and main page generating png or svg when published. "Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead." (from page: https://en.wikipedia.org/wiki/Template:Graph:Chart/doc). Is there a way to do this without breaking the preview? Used to be ok until added |xType = date to ease crowding of all dates together on x axis — Preceding unsigned comment added by 51.171.196.38 (talk) 11 June 2020 (UTC)
 * The above graph also fails for me in Firefox. Below I added the year to each date. That works for me. Discussed at Wikipedia:Village pump (technical) PrimeHunter (talk) 20:21, 9 January 2021 (UTC)

Dates in native language
What is the way to have the dates in native language, for instance Spanish on Spanish wikipedia, French on French wikipedia, German on German wikipedia and so on...

Could you document it on the documentation page? Else, just document dates type are not supported. — Preceding unsigned comment added by 88.136.214.91 (talk) 08:44, 22 May 2020 (UTC)
 * It's not (yet) supported by Chart:Graph. Native time format seems to be technically possible. There are advanced time format options few software layers below (Graph:Chart -> Extension:Graph -> Vega framework -> D3 framework). I will try to test it and put in next updates. Pietrasagh (talk) 06:52, 24 May 2020 (UTC)
 * Hi, just came looking for this, was there an update for this localization request? I don't seem to find it in the docs. I'm updating some of the COVID19 charts in Spanish Wikipedia to prepare for the change to 2021 (ie. adding xType=date and changing formats from "Mar 3" to "2020/03/03" to soon add "2021/01/01" and on) so was trying to find how to change the English month names provided by xType=date to Spanish. Thanks a lot for the hard work! --Roqz (talk) 23:29, 26 December 2020 (UTC)
 * Unfortunately this issue of local numbers and dates format in graph labels is still not solved. There is open ticket T100444 for this issue since 2015. Some solution is to use numerical label for date configured by, e.g   will format date label as 2021-01-10. More formatting options are described here. One important remark: in graph data for dates please always use ISO format for date like 1980-10-19. Otherwise Mozilla (and probably Safari) based browsers won't display graph correctly. Chrome and chromium based browsers are more forgiving in this matter. Date in graph data in format 2021/01/01 will probably cause problems on some browsers. Pietrasagh (talk) 10:24, 10 January 2021 (UTC)
 * Thanks! I will be following your suggestions; using numerical date format for display and ISO dates within the graph data. --Roqz (talk) 15:36, 10 January 2021 (UTC)

Help with removing decimals from y-axis
I have been trying to make charts for rankings tables in lieu of continually uploading new image files. In the y-axis of the line chart below, we have decimals, but I only want it to display whole numbers.

Then when I use yType = string, the y-axis is off-kilter with the labels at the wrong locations.

Can someone help me make the chart use only whole numbers in the y-axis. Thanks. Bob247 (talk) 21:34, 16 November 2020 (UTC)
 * d will help a little. – Jonesey95 (talk) 02:34, 17 November 2020 (UTC)
 * Thanks. I tried that, but it just doesn’t look right with the duplication of the numbers. Bob247 (talk) 03:14, 17 November 2020 (UTC)


 * Unfortunately your request is outside of currently available options in template. You could use more advanced  tag and create it with Vega JSON syntax. Possible option for hard-coded axis ticks value points is parameter   in   settings. To get JSON for   tag expand your template definition with Special:ExpandTemplates and tweak it in Special:GraphSandbox. For Vega syntax details see here https://github.com/nyurik/vega/wiki/Axes. When you will have your graph look ready adding new data points in JSON is also quite simple.
 * I think that your graph definition could be much shorter if you would use step, stepafter or stepbefore depending on what you want to achieve. You wouldn't have to repeat same value for many dates. You need to put x values only for date when it changes. Example is here:
 * Problem with axis ticks can be solve it same as in code below
 * Problem with axis ticks can be solve it same as in code below

"axes": [ {     "type": "x", "title": "Year", "scale": "x", "properties": { "title": { "fill": { "value": "#54595d" }       },        "grid": { "stroke": { "value": "#54595d" }       },        "ticks": { "stroke": { "value": "#54595d" }       },        "axis": { "strokeWidth": { "value": 2 },         "stroke": { "value": "#54595d" }       },        "labels": { "fill": { "value": "#54595d" }       }      },      "grid": false },   {      "type": "y", "title": "Rank", "scale": "y", "values": [1,2,3], "format": "d", "properties": { "title": { "fill": { "value": "#54595d" }       },        "grid": { "stroke": { "value": "#54595d" }       },        "ticks": { "stroke": { "value": "#54595d" }       },        "axis": { "strokeWidth": { "value": 2 },         "stroke": { "value": "#54595d" }       },        "labels": { "fill": { "value": "#54595d" }       }      },      "grid": false } ],  "data": [ {     "format": { "parse": { "y": "number", "x": "date" },       "type": "json" },     "name": "chart", "values": [ {         "y": 2, "series": "y", "x": "2003/10/06" },       {          "y": 1, "series": "y", "x": "2004/05/03" },       {          "y": 3, "series": "y", "x": "2007/04/09" },       {          "y": 2, "series": "y", "x": "2009/09/28" },       {          "y": 1, "series": "y", "x": "2011/06/06" },       {          "y": 3, "series": "y", "x": "2014/09/22" },       {          "y": 2, "series": "y", "x": "2020/11/16" }     ]    }  ],    "legends": [], "scales": [ {     "type": "time", "name": "x", "domain": { "data": "chart", "field": "x" },     "range": "width", "zero": false },   {      "clamp": true, "type": "linear", "zero": false, "range": "height", "nice": true, "name": "y", "domainMax": 1, "domain": { "data": "chart", "field": "y" },     "domainMin": 4 },   {      "domain": { "data": "chart", "field": "series" },     "type": "ordinal", "name": "color", "range": [ "#000000"     ]    }  ],  "version": 2, "marks": [ {     "type": "line", "properties": { "hover": { "stroke": { "value": "red" }       },        "update": { "stroke": { "scale": "color", "field": "series" }       },        "enter": { "y": { "scale": "y", "field": "y" },         "x": { "scale": "x", "field": "x" },         "stroke": { "scale": "color", "field": "series" },         "interpolate": { "value": "step" },         "strokeWidth": { "value": 2.5 }       }      },      "from": { "data": "chart" }   }  ],  "height": 250, "width": 250 }
 * Pietrasagh (talk) 20:13, 26 November 2020 (UTC)

Colors
The "default color palette ... is Category10" -- could we link to that, so readers know what the categories are?

How do we edit the "Parameters" section, since there is no edit link for it? I wanted to add the codes for the colors if we don't have a link to the list. — kwami (talk) 22:17, 8 December 2021 (UTC)


 * The colours listed in this template come from Template:ChartColors. If you hover your mouse over each colour box, you'll see the hex code appear. Otherwise, you can get the colours directly from Module:ChartColors. -- / Alex /21  22:37, 8 December 2021 (UTC)


 * Thanks! And should let me start with some color other than the first, which was another of my questions. How do I put those values in the 'color' param of a pie graph? All I'm getting is black. (Please ping me.) — kwami (talk) 04:50, 6 January 2022 (UTC)
 * @Kwamikagami Just set #e01815,#ff00e6,#a1ff00,#9500ff,[...] with the relevant hex codes separated by commas. -- Alex_ 21 TALK 07:16, 6 January 2022 (UTC)
 * Okay, thanks. I was hoping I could set them to categ20|3 or something.
 * Also, it would be nice if the Module:ChartColors doc were updated to include the additional colors at Template:ChartColors, though I suppose we can always just go to the code. — kwami (talk) 07:17, 6 January 2022 (UTC)

Axis intervals
If we take a look at the graph at Template:Graph:Chart, we can see that the x-axis has an interval of 5 between its values. However, intervals on the x-axis aren't supported when using stackedrect; instead, it shows every single x-value. Is there a reason for this? -- Alex_ 21 TALK 03:57, 6 January 2022 (UTC)
 * Bar graphs (stacked or not) for x values can only use ordinal scale. Scatter plot is special kind of line chart (no line, only symbols). Mentioned example scatter plot use linear scale which is default scale for "line" chart. For linear scale ticks are "automatically" generated at some values depending on graph size and range of x scale. Pietrasagh (talk) 19:20, 5 February 2022 (UTC)

Downloading graph
How are users supposed to download the graph that they may find in an article? Shubjt (talk) 01:01, 22 January 2023 (UTC)


 * Right click, save as. Uwappa (talk) 07:04, 22 January 2023 (UTC)