Show quarter markers instead of years in JSCharting Gantt Chart

Question

I am new to this JSCharting library and working with it to create a Gantt Chart. When I map my data on the chart, it slices the Y Axis based on years. I am trying to slice it based on 3 months intervals. Instead of 2021, 2022, 2023, I want to show Q1, Q2, Q3, Q4 for each year.

One quick and dirty solution I found is below, to create markers on Y Axis like this:

{
     yAxis: {
        markers: [2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028].reduce(
          (all: { label: { text: string; color: string }; value: string }[], year) => {
            return [
              ...all,
              ...[1, 4, 7, 10].map((month) => ({
                label: {
                  text: month === 1 ? "Q1" : month === 4 ? "Q2" : month === 7 ? "Q3" : "Q4",
                  color: "#ddd",
                },
                color: "#ddd",
                value: `${month}/1/${year}`,
                legendEntry: {
                  visible: false,
                },
              })),
            ];
          },
          []
        ),
      },
}

However, when I do that, first line of data covers the quarter labels like so.

Is there a proper way to do this and show it in the bottom with along with years? I'd appreciate any help.

Answer 1

You can use calendar patterns to create ticks for quarters and months more easily. Here's an example.

var chart = JSC.chart('chartDiv', { 
  debug: true, 
  axisToZoom: 'x', 
  margin_right: 10, 
  xAxis: { 
    scale_type: 'time', 
    defaultTick_enabled: false, 
    customTicks: [ 
      { 
        value_pattern: 'month', 
        label_text: '%min'
      }, 
      { 
        value_pattern: 'quarter', 
        label_text: qTickText 
      }, 
      { 
        value_pattern: 'year', 
        label_text: '%min'
      } 
    ] 
  }, 
  legend_visible: false, 
  title_label_text: 
    'Apple iPhone sales (in million units)', 
  series: [ 
    { 
      type: 'line spline', 
      defaultPoint: { 
        marker: { 
          outline: { width: 2, color: 'white' } 
        } 
      }, 
      points: [ 
        { x: '04/1/2016', y: 74.78 }, 
        { x: '07/1/2016', y: 51.19 }, 
        { x: '10/1/2016', y: 40.4 }, 
        { x: '1/1/2017', y: 45.51 }, 
        { x: '04/1/2017', y: 78.29 }, 
        { x: '07/1/2017', y: 50.76 }, 
        { x: '10/1/2017', y: 41.03 }, 
        { x: '1/1/2018', y: 46.68 }, 
        { x: '04/1/2018', y: 67.32 }, 
        { x: '07/1/2018', y: 52.22 }, 
        { x: '10/1/2018', y: 41.3 }, 
        { x: '1/1/2019', y: 46.89 } 
      ] 
    } 
  ] 
}); 
  
function qTickText(v) { 
  return dateToQuarter(v[0]); 
} 
  
function dateToQuarter(d) { 
  d = new Date(d); 
  return 'Q' + (Math.floor(d.getMonth() / 3) + 1); 
}