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

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: "Sugar - Maroon 5", y: 3.25 },
      { label: "Sorry - Justin Bieber", y: 3.32 },
      { label: "Johny Johny Yes Papa", y: 3.63 },
      { label: "Gangnam Style", y: 3.72 },
      { label: "Uptown Funk", y: 3.90 },
      { label: "Masha and the Bear", y: 4.32 },
      { label: "See You Again", y: 4.66 },
      { label: "Shape of You", y: 4.91 },
      { label: "Baby Shark Dance", y: 6.13 },
      { label: "Despacito", y: 6.88 }
    ]
  }]
});
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.