Home Forums Chart Support Changing the labels of the X-axis

Changing the labels of the X-axis

Viewing 6 posts - 1 through 6 (of 6 total)
  • #25819

    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

    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.



    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.

    spline charts with axis labels

    Vishwas R
    Team CanvasJS


    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..??




    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.

    custom color set

    Vishwas R
    Team CanvasJS



    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.



    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.