$ yarn add @reuters-graphics/chart-module-weeklyaverage
import WeeklyAverage from '@reuters-graphics/chart-module-weeklyaverage';
const myChart = new WeeklyAverage();
// To create your chart, pass a selector string to the chart's selection method,
// as well as any props or data to their respective methods. Then call draw.
myChart
.selection('#chart')
.data([
// the data format needs a date and count variable.
{"date":"2020-07-05","count":10000},
{"date":"2020-07-06","count":10000}
])
.props({
locale: 'en', // English by default. Used to format text, dates and nos.
stroke: 'steelblue', // colour of line
strokeWidth: 2.5, // width of the line
fill: '#eee', // colour of the bars
height: 200, // chart height
avg_days: 7, // avg line should be an how many day rolling avg
annotations: [
// array of annotations you want on the
// chart in the format below. Class hide-mobile and hide-desktop
// can be used for platform specific annotations
// {
// 'date':'2020-02-12',
// 'text':'Hubei revises methodology',
// 'class':'hide-mobile'
// }
],
population: false, // If you want the numbers to be normalised
// by population, pass a number here. It is false by default.
bars: true, // True by default.
// If you want just the line, set value to true
padding: 0, // to set padding between the bars.
// value should be between 0 to 1
labels: false, // Setting this to true will show a label
// to explain what the bars and line are
left_y_axis: false, // Set false by default, setting to true will have
// only the max value displayed on the left
x_axis: true, // Set true by default, setting to false will hide the x-axis.
date_range: ['2020-03-01','2020-07-02'], // Pass two dates in a YYYY-MM-DD
// format to filter the data based on that.
// Leaving it empty will put all the data on the chart
margin: {
left: 20, right: 50, top: 10, bottom: 30
}, // Pass only the variables that you want to overwrite
variable_name: 'cases', // What is this a chart of? Infections? Deaths? Tests?
// sets the default position of the tooltip
tooltip_default: 'top', // other options auto or bottom
text: { // Here we pass all the text lines in the chart
daily_numbers: 'Daily new {{ variable }}',
// Bar label says daily new cases
tooltip_suffix: '{{ number }} new {{ variable }}', // Tooltip will say XXXXX new cases
avg: '{{ average }}-day average', // How many day avg is the line.
// takes the number automatically from avg_days
per_pop_tt: '{{ number }} new {{ variable }} per 100k people in the population',
// if normalised by population, tooltip will say XXXXX
// new cases per 100k people in the population
subhed: '', // empty by default. Can receive a string for a subhed above the chart
no_data: 'No reported {{ variable }}' // Chart says no reported cases if
// there are no reported cases for that place
},
chart_formats: {
// Format number for axis
number: ',',
// Format number for tooltip
number_tooltip: ',',
// Date on tooltip
date_tooltip: '%B %e',
// Date format for the x axis
date: '%b %e',
},
})
.draw();
// You can call any method again to update the chart.
myChart
.data([
{"date":"2020-07-05","count":10000},
{"date":"2020-07-06","count":20000},
{"date":"2020-07-04","count":10000}
])
.draw();
// Or just call the draw function alone, which is useful for resizing the chart.
myChart.draw();To apply this chart's default styles when using SCSS, simply define the variable $WeeklyAverage-container to represent the ID or class of the chart's container(s) and import the _chart.scss partial.
$WeeklyAverage-container: '#chart';
@import '~@reuters-graphics/chart-module-weeklyaverage/scss/main';Read more in the DEVELOPING docs about how to write your chart module.