CODEWITHSUNDEEP
angular-chart
Agustin Lopez
Agustin Lopez

Reputation: 1365

Mixed chart type - Angular ChartJS

I am trying to create a mixed chart with the angular plugin instead of plain javascript. For that, I am using this library http://jtblin.github.io/angular-chart.js/

In plain javascript it is created with something similar to this:

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        type: 'bar',
        label: "Visitor",
        data: [200, 185, 590, 621, 250, 400, 95],
        fill: false,
        backgroundColor: '#71B37C',
        borderColor: '#71B37C',
        hoverBackgroundColor: '#71B37C',
        hoverBorderColor: '#71B37C',
        yAxisID: 'y-axis-1'
      },
      {
        label: "Sales",
        type:'line',
        data: [51, 65, 40, 49, 60, 37, 40],
        fill: false,
        borderColor: '#EC932F',
        backgroundColor: '#EC932F',
        pointBorderColor: '#EC932F',
        pointBackgroundColor: '#EC932F',
        pointHoverBackgroundColor: '#EC932F',
        pointHoverBorderColor: '#EC932F',
        yAxisID: 'y-axis-2'
      }
    ]
  },
  options: {
    responsive: true,
    tooltips: {
      mode: 'label'
    },
    elements: {
      line: {
        fill: false
      }
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            display: false
          },
          labels: {
            show: true,
          }
        }
      ],
      yAxes: [
        {
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
          gridLines:{
            display: false
          },
          labels: {
            show: true,
          }
        },
        {
          type: "linear",
          display: true,
          position: "right",
          id: "y-axis-2",
          gridLines: {
            display: false
          },
          labels: {
            show:true,
          }
        }
      ]
    }
  }
});

It can be seen here: http://plnkr.co/edit/TvY5tz?p=preview

I have tried tons of ways to do the same thing with angular-chart but I have been unable to do so. Has anyone been able to create any mixed chart type with the library? If so, please share any example.

Thanks in advance.

Upvotes: 2

Views: 2336

Answers (2)

Fergus
Fergus

Reputation: 2982

It is now possible with 1.0.0-alpha8, See here on github

Upvotes: 1

WispyCloud
WispyCloud

Reputation: 4230

Not possible right now, there is an open issue to track this: https://github.com/jtblin/angular-chart.js/issues/336

Upvotes: 1

Related Questions