Skip to content

Commit 78c7cc0

Browse files
committed
Added ChartTitle and the fontSize for the title options
Added functionality for a Charttitle. Since the default fontSize of the title is very small (12px) I added an option to set the size aswell
1 parent 0bbe34f commit 78c7cc0

File tree

16 files changed

+113
-1
lines changed

16 files changed

+113
-1
lines changed

src/ChartJS/widgets/BarChart/BarChart.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
<category>Appearance</category>
2323
<description>Label to show on the Y-axis. Leave empty for no label</description>
2424
</property>
25+
<property key="chartTitle" type="string" required="false" defaultValue="">
26+
<caption>Title</caption>
27+
<category>Appearance</category>
28+
<description>The title of the chart. Will be shown above the chart. Leave empty for no title</description>
29+
</property>
30+
<property key="titleSize" type="integer" required="true" defaultValue="12">
31+
<caption>Title font-size</caption>
32+
<category>Appearance</category>
33+
<description>The size of the chart title. Default is 12</description>
34+
</property>
2535
<property key="height" type="integer" required="true" defaultValue="250">
2636
<caption>Height</caption>
2737
<category>Appearance</category>

src/ChartJS/widgets/BarChart/widget/BarChart.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@ define([
108108
type: "bar",
109109
data: data,
110110
options: {
111+
title: {
112+
display: (this.chartTitle !== "") ? true : false,
113+
text: (this.chartTitle !== "") ? this.chartTitle : "",
114+
fontFamily: this._font,
115+
fontSize: this.titleSize
116+
},
111117
scales : {
112118
xAxes: [{
113119
scaleLabel: {

src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
<category>Appearance</category>
2323
<description>Font used in the chart legend. Default (or empty) = Helvetica Neue</description>
2424
</property>
25+
<property key="chartTitle" type="string" required="false" defaultValue="">
26+
<caption>Title</caption>
27+
<category>Appearance</category>
28+
<description>The title of the chart. Will be shown above the chart. Leave empty for no title</description>
29+
</property>
30+
<property key="titleSize" type="integer" required="true" defaultValue="12">
31+
<caption>Title font-size</caption>
32+
<category>Appearance</category>
33+
<description>The size of the chart title. Default is 12</description>
34+
</property>
2535
<property key="responsiveAnimationDuration" type="integer" required="true" defaultValue="0">
2636
<caption>Responsive animation duration</caption>
2737
<category>Appearance</category>

src/ChartJS/widgets/DoughnutChart/widget/DoughnutChart.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,12 @@ define([
9999
type: "doughnut",
100100
data: this._createDataSets(data),
101101
options: {
102+
title: {
103+
display: (this.chartTitle !== "") ? true : false,
104+
text: (this.chartTitle !== "") ? this.chartTitle : "",
105+
fontFamily: this._font,
106+
fontSize: this.titleSize
107+
},
102108

103109
responsive : this.responsive,
104110
responsiveAnimationDuration : (this.responsiveAnimationDuration > 0 ? this.responsiveAnimationDuration : 0),

src/ChartJS/widgets/LineChart/LineChart.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@
2424
<category>Appearance</category>
2525
<description>Label to show on the Y-axis. Leave empty for no label</description>
2626
</property>
27+
<property key="chartTitle" type="string" required="false" defaultValue="">
28+
<caption>Title</caption>
29+
<category>Appearance</category>
30+
<description>The title of the chart. Will be shown above the chart. Leave empty for no title</description>
31+
</property>
32+
<property key="titleSize" type="integer" required="true" defaultValue="12">
33+
<caption>Title font-size</caption>
34+
<category>Appearance</category>
35+
<description>The size of the chart title. Default is 12</description>
36+
</property>
2737
<property key="isStacked" type="boolean" required="true" defaultValue="false">
2838
<caption>Stacked</caption>
2939
<category>Appearance</category>

src/ChartJS/widgets/LineChart/widget/LineChart.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,12 @@ define([
123123
type: "line",
124124
data: data,
125125
options: {
126+
title: {
127+
display: (this.chartTitle !== "") ? true : false,
128+
text: (this.chartTitle !== "") ? this.chartTitle : "",
129+
fontFamily: this._font,
130+
fontSize: this.titleSize
131+
},
126132
scales : {
127133
yAxes: [{
128134
//If stacked is set to true, the Y-axis needs to be stacked for it to work
@@ -148,7 +154,7 @@ define([
148154
fontFamily: this._font
149155
},
150156
type: "category",
151-
id: "x-axis-0",
157+
id: "x-axis-0",
152158
ticks : { fontFamily: this._font, }
153159
}]
154160
},

src/ChartJS/widgets/PieChart/PieChart.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@
2525
<category>Appearance</category>
2626
<description>Font used in the chart legend. Default (or empty) = Helvetica Neue</description>
2727
</property>
28+
<property key="chartTitle" type="string" required="false" defaultValue="">
29+
<caption>Title</caption>
30+
<category>Appearance</category>
31+
<description>The title of the chart. Will be shown above the chart. Leave empty for no title</description>
32+
</property>
33+
<property key="titleSize" type="integer" required="true" defaultValue="12">
34+
<caption>Title font-size</caption>
35+
<category>Appearance</category>
36+
<description>The size of the chart title. Default is 12</description>
37+
</property>
2838
<property key="responsiveAnimationDuration" type="integer" required="true" defaultValue="0">
2939
<caption>Responsive animation duration</caption>
3040
<category>Appearance</category>

src/ChartJS/widgets/PieChart/widget/PieChart.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,12 @@ define([
9595
type: "pie",
9696
data: this._createDataSets(data),
9797
options: {
98+
title: {
99+
display: (this.chartTitle !== "") ? true : false,
100+
text: (this.chartTitle !== "") ? this.chartTitle : "",
101+
fontFamily: this._font,
102+
fontSize: this.titleSize
103+
},
98104

99105
responsive : this.responsive,
100106
responsiveAnimationDuration : (this.responsiveAnimationDuration > 0 ? this.responsiveAnimationDuration : 0),

src/ChartJS/widgets/PolarChart/PolarChart.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@
2222
<category>Appearance</category>
2323
<description>Font used in the chart legend. Default (or empty) = Helvetica Neue</description>
2424
</property>
25+
<property key="chartTitle" type="string" required="false" defaultValue="">
26+
<caption>Title</caption>
27+
<category>Appearance</category>
28+
<description>The title of the chart. Will be shown above the chart. Leave empty for no title</description>
29+
</property>
30+
<property key="titleSize" type="integer" required="true" defaultValue="12">
31+
<caption>Title font-size</caption>
32+
<category>Appearance</category>
33+
<description>The size of the chart title. Default is 12</description>
34+
</property>
2535
<property key="responsiveAnimationDuration" type="integer" required="true" defaultValue="0">
2636
<caption>Responsive animation duration</caption>
2737
<category>Appearance</category>

src/ChartJS/widgets/PolarChart/widget/PolarChart.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,12 @@ define([
9797
type: "polarArea",
9898
data: this._createDataSets(data),
9999
options: {
100+
title: {
101+
display: (this.chartTitle !== "") ? true : false,
102+
text: (this.chartTitle !== "") ? this.chartTitle : "",
103+
fontFamily: this._font,
104+
fontSize: this.titleSize
105+
},
100106

101107
responsive : this.responsive,
102108
responsiveAnimationDuration : (this.responsiveAnimationDuration > 0 ? this.responsiveAnimationDuration : 0),

0 commit comments

Comments
 (0)