Logarithmic axis in Vue Chart component

13 Jun 202424 minutes to read

Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numeric values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
  { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
  { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
  { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
  { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
  { x: new Date(2005, 0, 1), y: 11000 }
];
const primaryXAxis = {
  valueType: 'DateTime',
  title: 'Years',
  labelFormat: 'y'
};
const primaryYAxis = {
  valueType: 'Logarithmic',
  title: 'Profit'
};
const title = "Product X Growth [1995-2005]";

provide('chart', [LineSeries, Logarithmic, DateTime]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
        { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
        { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
        { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
        { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
        { x: new Date(2005, 0, 1), y: 11000 }
      ],
      primaryXAxis: {
        valueType: 'DateTime',
        title: 'Years',
        labelFormat: 'y'
      },
      primaryYAxis: {
        valueType: 'Logarithmic',
        title: 'Profit'
      },
      title: "Product X Growth [1995-2005]"
    };
  },
  provide: {
    chart: [LineSeries, Logarithmic, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Note: To use log axis, we need to inject Logarithmic into the provide and set the valueType of axis to Logarithmic.

Range

Range of an axis, will be calculated automatically based on the provided data, you can also customize the range
of the axis using minimum, maximum and interval property of the axis.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
  { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
  { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
  { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
  { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
  { x: new Date(2005, 0, 1), y: 11000 }
];
const primaryXAxis = {
  valueType: 'DateTime',
  title: 'Years',
  labelFormat: 'y'
};
const primaryYAxis = {
  valueType: 'Logarithmic',
  title: 'Profit',
  minimum: 100,
  maximum: 10000
};
const title = "Product X Growth [1995-2005]";

provide('chart', [LineSeries, Logarithmic, DateTime]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
        { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
        { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
        { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
        { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
        { x: new Date(2005, 0, 1), y: 11000 }
      ],
      primaryXAxis: {
        valueType: 'DateTime',
        title: 'Years',
        labelFormat: 'y'
      },
      primaryYAxis: {
        valueType: 'Logarithmic',
        title: 'Profit',
        minimum: 100,
        maximum: 10000
      },
      title: "Product X Growth [1995-2005]"
    };
  },
  provide: {
    chart: [LineSeries, Logarithmic, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Logarithmic Base

Logarithmic base can be customized by using the logBase property of the axis.
For example when the logBase is 5, the axis values follows 5-2, 5-1, 50,
51, 52 etc.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
  { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
  { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
  { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
  { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
  { x: new Date(2005, 0, 1), y: 11000 }
];
const primaryXAxis = {
  valueType: 'DateTime',
  title: 'Years',
  labelFormat: 'y'
};
const primaryYAxis = {
  valueType: 'Logarithmic',
  title: 'Profit',
  logBase: 2
};
const title = "Product X Growth [1995-2005]";

provide('chart', [LineSeries, Logarithmic, DateTime]);
</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
        { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
        { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
        { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
        { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
        { x: new Date(2005, 0, 1), y: 11000 }
      ],
      primaryXAxis: {
        valueType: 'DateTime',
        title: 'Years',
        labelFormat: 'y'
      },
      primaryYAxis: {
        valueType: 'Logarithmic',
        title: 'Profit',
        logBase: 2
      },
      title: "Product X Growth [1995-2005]"
    };
  },
  provide: {
    chart: [LineSeries, Logarithmic, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Logarithmic Interval

Logarithmic axis interval can be customized by using the interval
property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are
placed at an interval of 102. The default value of the interval is 1.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
  { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
  { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
  { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
  { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
  { x: new Date(2005, 0, 1), y: 11000 }
];
const primaryXAxis = {
  valueType: 'DateTime',
  title: 'Years',
  labelFormat: 'y'
};
const primaryYAxis = {
  valueType: 'Logarithmic',
  title: 'Profit',
  interval: 2
};
const title = "Product X Growth [1995-2005]";

provide('chart', [LineSeries, Logarithmic, DateTime]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Product X'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, Logarithmic, DateTime } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
        { x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
        { x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
        { x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
        { x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
        { x: new Date(2005, 0, 1), y: 11000 }
      ],
      primaryXAxis: {
        valueType: 'DateTime',
        title: 'Years',
        labelFormat: 'y'
      },
      primaryYAxis: {
        valueType: 'Logarithmic',
        title: 'Profit',
        interval: 2
      },
      title: "Product X Growth [1995-2005]"
    };
  },
  provide: {
    chart: [LineSeries, Logarithmic, DateTime]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>