Skip to content

Horizontal Clustered Bar

henryjameslau edited this page Sep 25, 2017 · 6 revisions

Instructions for creating a responsive horizontal clustered bar chart

screenshot-2017-9-21 cluster horizontal

The files for each chart should be of the following format:


The config file contains all the variables which you can adjust. Data.csv contains the data for your graph. The lib folder contains javascript libraries used. You'll also need the images folder.

If you’re making several charts they can share the same “lib” file as follows

image2 image3 image4

Data file

To make a responsive line chart save your data in csv form of the following format:

state var1 var 2 var 3 var 4

For each category, there will be 4 bars drawn from vars 1-4. It’s important to insure the first column is named exactly “state”.


Open the “config.json” file. You can open this in a text editor such as Notepad++ or TextEdit or download a code editor such as Atom, Dreamweaver, Brackets or Sublime Text 2.


These contain the main variables which the chart will need and will possibly need changing for each new chart.

"graphic_data_url": "data.csv",

where data.csv is the name of the data file, must be in csv form

"colour_palette": [ "#274796" , "pink", "#E73F40", "#7BCAE2" ],

specifies the colour to draw the bars. See the Style.ons on colour for guidance.

"dateFormat":"%Y-%y", Tell the chart what format to expect the numbers in the csv to be interpreted at dates. See the D3 wiki about time formatting.

"legendLabels" :[ "Education for under-fives" , "Primary education" , "Secondary education" , "Tertiary education" ],

These are the labels for the legend.

"legendStyle": can either be "rect" for rectangles or blank where it will draw squares

"sourceText":["Source information"],

Tell what words to make the source and where to link that too.

Annotation can be added in annotationChart with annotationBullet for annotation that appear as bullet points in the mobile view. Use double spaces to cause a line break. annotationXY tells where to plot the annotations and take an array of a x-position, y-position. annotationAlign tells it how to align the annotation and takes the same options as text-anchor attribute of SVG. In total this could look like

"annotationChart": ["The proportion of spending on each education category  has remained broadly stable over the past five years"],
"annotationBullet": ["annotationBullet1"],
"annotationXY":[[30, "2013-14"]],

Circles can be added by setting circles to be true. annotationCXCY then takes an array of arrays with values [X,Y] where the circles need to go.

"xAxisLabel":"%", add the unit to x-axis

"xAxisScale":[0,50], sets the range for the x-axis. Other options include auto_zero_max or auto_min_max

"barHeight_sm_md_lg" : [60,70,80] sets the dimensions for the chart height for the small, medium and large views.

You can’t perform that action at this time.