Skip to content

Fix tick options and chartGap #480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nrennie wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix tick options and chartGap #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0988b51
Add first/last date config
nrennie Jun 25, 2026
d8a7bf4
remove .essential
nrennie Jun 25, 2026
e4475d6
Remove .optional from other scripts
nrennie Jun 25, 2026
166d6ee
Remove essential and optional from annot example
nrennie Jun 25, 2026
1ab1ad6
Add first/last date
nrennie Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion area-stacked-sm/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function drawGraphic() {

// Set dimensions
let margin = { ...config.margin[size] };
let chartGap = config.optional?.chartGap || 10;
let chartGap = config?.chartGap || 10;

// Calculate chart width here
let chartWidth = calculateChartWidth({
Expand Down
2 changes: 1 addition & 1 deletion bar-chart-clustered-sm/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function drawGraphic() {
let chartPosition = chartIndex % chartsPerRow;

let margin = { ...config.margin[size] };
let chartGap = config.optional?.chartGap || 10;
let chartGap = config?.chartGap || 10;

let chartWidth = calculateChartWidth({
screenWidth: parseInt(graphic.style('width')),
Expand Down
2 changes: 1 addition & 1 deletion bar-chart-sm/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function drawGraphic() {
let chartPosition = chartIndex % chartsPerRow;

let margin = { ...config.margin[size] };
let chartGap = config.optional?.chartGap || 10;
let chartGap = config?.chartGap || 10;

let chartWidth = calculateChartWidth({
screenWidth: parseInt(graphic.style('width')),
Expand Down
2 changes: 1 addition & 1 deletion line-chart-sm-focus/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function drawGraphic() {
// Set dimensions
let margin = { ...config.margin[size] };

let chartGap = config.optional?.chartGap || 10;
let chartGap = config?.chartGap || 10;

let chartWidth = calculateChartWidth({
screenWidth: parseInt(graphic.style('width')),
Expand Down
2 changes: 2 additions & 0 deletions line-chart-sm-multiseries/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,8 @@ config = {
secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override
forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit
},
"addFirstDate": false,
"addFinalDate": false,
"yAxisTicks": {
"sm": 7,
"md": 5,
Expand Down
21 changes: 11 additions & 10 deletions line-chart-with-ci-area-sm/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ config = {
// "lineCurveType": "curveCardinal", // Cardinal spline curve
// "lineCurveType": "curveCatmullRom" // Catmull-Rom spline curve
// "lineCurveType": "curveMonotoneX" // Monotone spline curve
"xDomain": [-13, 25],
"xDomain": "auto",
// either "auto" or an array for the x domain e.g. [0,2000] - DOES NOT WORK
"yDomainMax": "auto",
"yDomainMax": "auto",
// Y-axis maximum options:
// "auto" - Smart mode: uses data max with 10% padding if positive, or 0 if all data is negative.
// Automatically trims excessive whitespace below zero (>50% of range) while keeping 30% cushion above highest data point.
Expand Down Expand Up @@ -75,6 +75,14 @@ config = {
},
"chartGap": 20,
// New tick config
"addFirstDate": false,
"addFinalDate": false,
"labelSpans": {
"enabled": false,
timeUnit: 'year',//set to "day","month",'quarter' or 'year'
secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override
forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit
},
"xAxisTickMethod": "total", // "interval" or "total"
"xAxisTickCount": { // for "total" method
"sm": 2,
Expand All @@ -94,13 +102,6 @@ config = {
"md": 5,
"lg": 8
},
"labelSpans": {
"enabled": true,
timeUnit: 'year',//set to "day","month",'quarter' or 'year'
secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override
forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit
},
"dropYAxis": true,
"addEndMarkers": true, // true = always show, false = never show, "auto" = show only at sm size
"elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 }
"addEndMarkers": true // true = always show, false = never show, "auto" = show only at sm size
};
2 changes: 1 addition & 1 deletion line-chart-with-ci-area-sm/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function drawGraphic() {
.attr('class', 'chart-container');

const chartEvery = config.chartEvery[size];
const chartGap = config.optional?.chartGap || 10;
const chartGap = config?.chartGap || 10;
const baseMargin = { ...config.margin[size] };
const sharedChartWidth = calculateChartWidth({
screenWidth: parseInt(graphic.style('width')),
Expand Down
107 changes: 51 additions & 56 deletions z-annotation-column-example/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,58 @@
config = {
"essential": {
"graphic_data_url": "data.csv",
"colour_palette": "#206095",
"sourceText": "Office for National Statistics",
"accessibleSummary": "Here is the screenreader text describing the chart.",
"xAxisTickFormat": {
"sm": "%Y",
"md": "%Y",
"lg": "%b-%y"
},
"yAxisTickFormat": ".0%",
"xAxisNumberFormat": ".0f",
"dateFormat": "%b-%y",
//the format your date data has in data.csv
"yDomain": "auto",
// either "auto" or an array for the x domain e.g. [0,100]
"yAxisLabel": "y axis label"
"graphic_data_url": "data.csv",
"colour_palette": "#206095",
"sourceText": "Office for National Statistics",
"accessibleSummary": "Here is the screenreader text describing the chart.",
"xAxisTickFormat": {
"sm": "%Y",
"md": "%Y",
"lg": "%b-%y"
},
"optional": {
"margin": {
"sm": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
},
"md": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
},
"lg": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
}
},
"aspectRatio": {
"sm": [1, 1],
"md": [1, 1],
"lg": [2, 1]
},
"xAxisTicksEvery": {
"sm": 4,
"md": 4,
"lg": 2
"yAxisTickFormat": ".0%",
"xAxisNumberFormat": ".0f",
"dateFormat": "%b-%y",
//the format your date data has in data.csv
"yDomain": "auto",
// either "auto" or an array for the x domain e.g. [0,100]
"yAxisLabel": "y axis label",
"margin": {
"sm": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
},
"yAxisTicks": {
"sm": 4,
"md": 8,
"lg": 10
"md": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
},
"addFirstDate": false,
"addFinalDate": false,
"mobileBreakpoint": 510,
"mediumBreakpoint": 600
"lg": {
"top": 25,
"right": 20,
"bottom": 50,
"left": 70
}
},
"aspectRatio": {
"sm": [1, 1],
"md": [1, 1],
"lg": [2, 1]
},
"xAxisTicksEvery": {
"sm": 4,
"md": 4,
"lg": 2
},
"yAxisTicks": {
"sm": 4,
"md": 8,
"lg": 10
},
"elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 },
"addFirstDate": false,
"addFinalDate": false,
"mobileBreakpoint": 510,
"mediumBreakpoint": 600,
"chart_build": {}
};
32 changes: 16 additions & 16 deletions z-annotation-column-example/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ function drawGraphic() {
//Set up some of the basics and return the size value ('sm', 'md' or 'lg')
size = initialise(size, config);

const aspectRatio = config.optional.aspectRatio[size];
let margin = config.optional.margin[size];
const aspectRatio = config.aspectRatio[size];
let margin = config.margin[size];
let chartWidth =
parseInt(graphic.style('width')) - margin.left - margin.right;
//height is set by the aspect ratio
Expand All @@ -32,16 +32,16 @@ function drawGraphic() {
x.domain([...new Set(graphic_data.map((d) => d.date))]);

let tickValues = x.domain().filter(function (d, i) {
return !(i % config.optional.xAxisTicksEvery[size])
return !(i % config.xAxisTicksEvery[size])
});

//Labelling the first and/or last bar if needed
if (config.optional.addFirstDate == true) {
if (config.addFirstDate == true) {
tickValues.push(graphic_data[0].date)
console.log("First date added")
}

if (config.optional.addFinalDate == true) {
if (config.addFinalDate == true) {
tickValues.push(graphic_data[graphic_data.length - 1].date)
console.log("Last date added")
}
Expand All @@ -50,8 +50,8 @@ function drawGraphic() {
let yAxis = d3.axisLeft(y)
.tickSize(-chartWidth)
.tickPadding(10)
.ticks(config.optional.yAxisTicks[size])
.tickFormat(d3.format(config.essential.yAxisTickFormat));
.ticks(config.yAxisTicks[size])
.tickFormat(d3.format(config.yAxisTickFormat));

let xDataType;

Expand All @@ -63,7 +63,7 @@ function drawGraphic() {

// console.log(xDataType)

let xTime = d3.timeFormat(config.essential.xAxisTickFormat[size])
let xTime = d3.timeFormat(config.xAxisTickFormat[size])

//set up xAxis generator
let xAxis = d3
Expand All @@ -72,7 +72,7 @@ function drawGraphic() {
.tickPadding(10)
.tickValues(tickValues) //Labelling the first and/or last bar if needed
.tickFormat((d) => xDataType == 'date' ? xTime(d)
: d3.format(config.essential.xAxisNumberFormat)(d));
: d3.format(config.xAxisNumberFormat)(d));

//create svg for chart
svg = addSvg({
Expand All @@ -82,7 +82,7 @@ function drawGraphic() {
margin: margin
})

if (config.essential.yDomain == 'auto') {
if (config.yDomain == 'auto') {
if (d3.min(graphic_data.map(({ value }) => Number(value))) >= 0) {
y.domain([
0,
Expand All @@ -91,7 +91,7 @@ function drawGraphic() {
y.domain(d3.extent(graphic_data.map(({ value }) => Number(value))))
}
} else {
y.domain(config.essential.yDomain);
y.domain(config.yDomain);
}

svg
Expand Down Expand Up @@ -121,15 +121,15 @@ function drawGraphic() {
.attr('x', (d) => x(d.date))
.attr('height', (d) => Math.abs(y(d.value) - y(0)))
.attr('width', x.bandwidth())
.attr('fill', config.essential.colour_palette);
.attr('fill', config.colour_palette);


// This does the y-axis label
addAxisLabel({
svgContainer: svg,
xPosition: 5 - margin.left,
yPosition: -10,
text: config.essential.yAxisLabel,
text: config.yAxisLabel,
textAnchor: "start",
wrapWidth: chartWidth
});
Expand Down Expand Up @@ -163,19 +163,19 @@ function drawGraphic() {
})

//create link to source
addSource('source', config.essential.sourceText);
addSource('source', config.sourceText);

//use pym to calculate chart dimensions
if (pymChild) {
pymChild.sendHeight();
}
}

d3.csv(config.essential.graphic_data_url).then((data) => {
d3.csv(config.graphic_data_url).then((data) => {
//load chart data
graphic_data = data;

let parseTime = d3.timeParse(config.essential.dateFormat);
let parseTime = d3.timeParse(config.dateFormat);

data.forEach((d, i) => {

Expand Down