Search code examples
jqueryhtmlcsstwitter-bootstrapamcharts

How to customize depth Graph of amcharts?

I am trying to customize the depth graph amchart but I'm unable to understand it. How it works how to style it as an image that given below?

Here is the link of the original graph which I want to customizing it

Link

enter image description here

Solution

  • Please think about the person answering your question, you say "customize" but that could mean anything, please be as specific as possible so people can help you.

    That said, the guides and demos on amCharts are fairly comprehensive, and we're still building on them, so suggestions are welcome especially if there's something essential that feels missing.

    If you're looking to customize the colors of the chart, you can use CSS to change the background of the entire chart as is done in this demo:

    #chartdiv {
  background-color:#121212;
}

    It also shows how to disable the grid line if you're interested in that:

    axis.renderer.grid.template.disabled = true;

    You can disable other axis elements like their labels similarly (this link is part of a larger guide on Axes in general).

    If you want to customize colors, first refer to our guide on colors as you'll be using JavaScript to color SVGs as opposed to CSS. Usually the attributes for SVGs through which colors will be applied are their fill and stroke attributes. While you can use keyword, hex, and rgb strings, on some rare occasions, this may then lose out on the colors animating between states. So if it's not a problem, try and use the am4core.Color class (the am4core.color is a convenience method to generate an instance of Color, please note the difference in upper/lower case).

    To adjust the colors of the plot area, there is a default plotContainer property on XYCharts, you can assign a fill to its first child's background property, e.g.:

    chart.plotContainer.children.getIndex(0).background.fill = am4core.color({ r: 17, g: 27, b: 54 }).brighten(0.2);

    For alternating colors, please see our guide "Alternating axis fills".

    To flip the axes, just swap the x/y axes, i.e. instead of the variables xAxis and yAxis in the original demo you linked to, I've changed them to valueAxis on the x axis and categoryAxis on the y axis (changing instances of {categoryX} to {categoryY} and {valueX} to {valueY}, speaking of which if you're looking to customize labels and tooltips' text, you can learn about formatting strings in v4). This will stand the chart up so it's from bottom->up, left aligned. If you want the chart to be anchored to the right, set the x axis renderer's inversed property to true:

    valueAxis.renderer.inversed = true;

    Here's a fork of your demo with much of the above combined:

    https://codepen.io/team/amcharts/pen/9801ece19a15b7f3c72c5b6af501bcb9