X-axis interval

[mbarens]

I’m doing a stacked column chart. The x-axis values are part numbers

ex. 4226799, 4137540, 4122324, etc

Even though there are huge gaps in the numbers, I want them to show up next to each other. Essentially treat them x-axis values like text not like a number. At the moment the gaps between the columns in huge.

How do I format the x-axis or the values so that the gaps in the numbers aren’t turned into huge spaces?

——-
window.onload = function () {

var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
title:{
text: “Google – Consolidated Quarterly Revenue”,
fontFamily: “arial black”,
fontColor: “#695A42″
},

axisY:{
valueFormatString:”$#0bn”,
gridColor: “#B6B1A8”,
tickColor: “#B6B1A8”
},
toolTip: {
shared: true,
content: toolTipContent
},
data: [{
type: “stackedColumn”,
showInLegend: true,
color: “#696661”,
name: “Q1”,
dataPoints: [
{ y: 9028, x: 4226799 },
{ y: 4160, x: 4221809 },
{ y: 2558, x: 4236167 },
{ y: 2780, x: 4231840 },
{ y: 500, x: 4228399 },
{ y: 520, x: 4232133 },
{ y: 840, x: 4221643 },
{ y: 1564, x: 4231730 },
{ y: 0, x: 4228178 },
{ y: 0, x: 4228181 },
]
},
{
type: “stackedColumn”,
showInLegend: true,
name: “Q2”,
color: “#EDCA93”,
dataPoints: [
{ y: 1037, x: 4226799 },
{ y: 4127, x: 4221809 },
{ y: 230, x: 4236167 },
{ y: 87, x: 4231840 },
{ y: 1859, x: 4228399 },
{ y: 1454, x: 4232133 },
{ y: 915, x: 4221643 },
{ y: 162, x: 4231730 },
{ y: 1506, x: 4228181 },
{ y: 1506, x: 4228178 },
]
},
{
type: “stackedColumn”,
showInLegend: true,
name: “Q3”,
color: “#695A42”,
dataPoints: [
{ y: 2207, x: 4226799 },
{ y: 0, x: 4221809 },
{ y: 0, x: 4236167 },
{ y: 0, x: 4231840 },
{ y: 0, x: 4228399 },
{ y: 0, x: 4232133 },
{ y: 113, x: 4221643 },
{ y: 0, x: 4231730 },
{ y: 0, x: 4228178 },
{ y: 0, x: 4228181 },
]
},
{
type: “stackedColumn”,
showInLegend: true,
name: “Q4”,
color: “#B6B1A8”,
dataPoints: [
{ y: 233.16, x: 4226799 },
{ y: 172.86, x: 4221809 },
{ y: 152.76, x: 4236167 },
{ y: 0.00, x: 4231840 },
{ y: 0.00, x: 4228399 },
{ y: 289.44, x: 4232133 },
{ y: 209.04, x: 4221643 },
{ y: 0.00, x: 4231730 },
{ y: 0.00, x: 4228181 },
{ y: 0.00, x: 4228178 },
]
}]
});
chart.render();

• This topic was modified 5 years, 2 months ago by mbarens.

[Vishwas R]

@mbarens,

You can pass data in sorted order with label instead of x-value to achieve your requirement. Please take a look at this JSFiddle.

In order to help us in understanding the issue, please have a reproducible demo of your chart. This one step can assure you a speedy response. Fork out our template JSFiddle and reproduce the chart at your end. Try to keep it to the bare minimum by removing unnecessary code.

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.

—
Vishwas R
Team CanvasJS