html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

// create a chart

var chart = anychart.pareto([

  {x: "Defect 1", value: 19},

  {x: "Defect 2", value: 9},

  {x: "Defect 3", value: 28},

  {x: "Defect 4", value: 87},

  {x: "Defect 5", value: 14},

]);

​

// set the chart title

chart.title("Pareto Chart: Appearance");

​

// configure the visual settings of the first series

chart.getSeries(0).normal().fill("#0066cc", 0.3);

chart.getSeries(0).hovered().fill("#0066cc", 0.1);

chart.getSeries(0).selected().fill("#0066cc", 0.5);

chart.getSeries(0).normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);

chart.getSeries(0).hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);

chart.getSeries(0).selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);

chart.getSeries(0).normal().stroke("#0066cc");

chart.getSeries(0).hovered().stroke("#0066cc", 2);

chart.getSeries(0).selected().stroke("#0066cc", 4);

​

// configure the visual settings of the second series

chart.getSeries(1).normal().stroke("#0066cc", 4, "4 4", "round");

​

// set the container id

chart.container("container");

​

// initiate drawing the chart

chart.draw();

});