JavaScript Charts with Axis Labels & Ticks inside Plot Area

Download JavaScript Chart Samples

In some cases placing axis labels and ticks inside plot area can save space and also improve user experience. Below example shows how to do the same. You can edit the code in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {
 
var chart = new CanvasJS.Chart("chartContainer", {
  theme: "dark2", // "light1", "light2", "dark1"
  animationEnabled: true,
  exportEnabled: true,
  title: {
    text: "Top 10 Most Viewed YouTube Videos"
  },
  axisX: {
    margin: 10,
    labelPlacement: "inside",
    tickPlacement: "inside"
  },
  axisY2: {
    title: "Views (in billion)",
    titleFontSize: 14,
    includeZero: true,
    suffix: "bn"
  },
  data: [{
    type: "bar",
    axisYType: "secondary",
    yValueFormatString: "#,###.##bn",
    indexLabel: "{y}",
    dataPoints: [
      { label: "Learning Colors", y: 4.91 },
      { label: "Uptown Funk", y: 4.96 },
      { label: "Wheels on the Bus", y: 5.36 },
      { label: "Phonics Song with Two Words", y: 5.36 },
      { label: "See You Again", y: 5.94 },
      { label: "Shape of You", y: 6.02 },
      { label: "Bath Song", y: 6.26 },
      { label: "Johny Johny Yes Papa", y: 6.73 },
      { label: "Despacito", y: 8.20 },
      { label: "Baby Shark Dance", y: 13.01 }
    ]
  }]
});
chart.render();
 
}

Chart Customizations

You can change the color and thickness of axis lines using lineColor and lineThickness. Some other common customization includes tickLength, tickThickness, etc.