Fixed formatting for numeric x-axis labels

ankane · Jan 19, 2023 · 857f8b8 · 857f8b8
1 parent 8e814dd
commit 857f8b8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -666,7 +666,13 @@ <h1>Scatter Same X</h1>
       <h1>Numeric Axis Line</h1>
       <div id="numeric-axis-line" class="chart"></div>
       <script>
-        new Chartkick.LineChart("numeric-axis-line", [{name: "Series A", data: [[8,32],[20,46],[2,28],[3,21],[4,20],[5,13],[6,27]]}, {name: "Series B", data: [[7,22],[1,36],[2,38],[3,31],[4,30],[5,3],[6,17]]}]);
+        new Chartkick.LineChart("numeric-axis-line", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]].map(v => [v[0], v[1] * 1000])}]);
+      </script>
+
+      <h1>Numeric Axis Line - Thousands</h1>
+      <div id="numeric-axis-line-thousands" class="chart"></div>
+      <script>
+        new Chartkick.LineChart("numeric-axis-line-thousands", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]].map(v => [v[0], v[1] * 1000])}], {thousands: ","});
       </script>
 
       <h1>Numeric Axis Area</h1>

diff --git a/src/adapters/chartjs.js b/src/adapters/chartjs.js
@@ -190,7 +190,7 @@ function setFormatOptions(chart, options, chartType) {
       };
     }
 
-    if (chart.xtype === "number" && !options.scales.x.ticks.callback) {
+    if ((chartType === "scatter" || chartType === "bubble") && !options.scales.x.ticks.callback) {
       options.scales.x.ticks.callback = function (value) {
         return formatValue("", value, numericOptions, true);
       };
@@ -239,6 +239,22 @@ function setFormatOptions(chart, options, chartType) {
       };
     }
   }
+
+  // avoid formatting x-axis labels
+  // by default, Chart.js applies locale
+  if ((chartType === "line" || chartType === "area") && chart.xtype === "number") {
+    if (!options.scales.x.ticks.callback) {
+      options.scales.x.ticks.callback = function (value) {
+        return toStr(value);
+      };
+    }
+
+    if (!options.plugins.tooltip.callbacks.title) {
+      options.plugins.tooltip.callbacks.title = function (context) {
+        return toStr(context[0].parsed.x);
+      };
+    }
+  }
 }
 
 function maxAbsY(series) {
@@ -565,6 +581,10 @@ export default class {
   }
 
   renderLineChart(chart, chartType) {
+    if (!chartType) {
+      chartType = "line";
+    }
+
     const chartOptions = {};
     if (chartType === "area") {
       // TODO fix area stacked
@@ -574,7 +594,7 @@ export default class {
     const options = jsOptions(chart, merge(chartOptions, chart.options));
     setFormatOptions(chart, options, chartType);
 
-    const data = createDataTable(chart, options, chartType || "line");
+    const data = createDataTable(chart, options, chartType);
 
     if (chart.xtype === "number") {
       options.scales.x.type = options.scales.x.type || "linear";