Changing the labels of the X-axis

[driven13]

Hello Support.

We have a “Stacked Column Chart”. On the X-axis, it has intervals of 10, so: 10, 20, 30 , 40, 50, 60

We want to override these numbers with text. So:
Instead of 10, we want it to say Apples
Instead of 20, we want it to say Oranges
Instead of 30, we want it to say Pears
Instead of 40, we want it to say Bananas
etc.

But both the x and y values are required to plot the chart.

Is there any way we can plot this chart and then change the labels of the X-axis to Apples, Oranges, Pears, etc….??

Thanks much.

[Vishwas R]

@driven13,

Setting label along with x and y-values should work fine in this case.

Kindly take a look at the code snippet below,

data: [{
    type: "spline",
    indexLabel: "{x}: {y}",
    dataPoints: [
        { x: 10, y: 5, label: "Ten" },
	{ x: 20, y: 9, label: "Twenty"  },
	{ x: 30, y: 17, label: "Thirty" },
	{ x: 40, y: 32, label: "Forty" },
	{ x: 50, y: 22, label: "Fifty" }				
    ]
  }] 

Please take a look at this JSFiddle for an example on spline charts with axis labels.

—
Vishwas R
Team CanvasJS

[driven13]

Thanks for the response. That worked nicely.

Is there any way to set the color of one of the stacks using a parameter.

Currently, the colors are automatically set by the system from our custom set of colors. We need to set a specific color to one of the values.

Is this possible..??

Thanks.

[Vishwas R]

@driven13,

You can change the color of any datapoint by setting color property. Please refer documentation for more information along with live example.

You can also have custom color-set in the chart, please refer documentation for more information.

—
Vishwas R
Team CanvasJS

[driven13]

Hi.

Appreciate the fast response. That was exactly what I was looking for.

Related question: We have been using the custom color-set and it has been working well for the most part.
When a chart is rendered for the first time, it picks the colors from this custom color-set. From that point forward, the exact same colors are being used for the same datapoints every time someone pulls up that same chart. Is there any way to “clear the cache” so that every time the same chart is rendered, it picks a different color from the same custom color-set that we are using…???

Hopefully I am making sense here…:)

Thanks again.

[Vishwas R]

@driven13,

Colors in the colorset is mapped with the datapoints i.e., 1st color will be applied for 1st datapoint, 2nd color to the 2nd datapoint, and so on. Updating colorset before every re-render will change the colors of datapoints on re-render of the chart.

—
Vishwas R
Team CanvasJS