These chart samples are useless

[amirandev]

I don`t really understand how to setup a line chart using this nonsense.
There is not selector to select canvas and there is not data array. These samples does not help me at all.

https://www.chartjs.org/docs/latest/samples/line/line.html
https://github.com/chartjs/Chart.js/blob/master/docs/samples/line/line.md

// <block:actions:2>
const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
      });
      chart.update();
    }
  },
  {
    name: 'Add Dataset',
    handler(chart) {
      const data = chart.data;
      const dsColor = Utils.namedColor(chart.data.datasets.length);
      const newDataset = {
        label: 'Dataset ' + (data.datasets.length + 1),
        backgroundColor: Utils.transparentize(dsColor, 0.5),
        borderColor: dsColor,
        data: Utils.numbers({count: data.labels.length, min: -100, max: 100}),
      };
      chart.data.datasets.push(newDataset);
      chart.update();
    }
  },
  {
    name: 'Add Data',
    handler(chart) {
      const data = chart.data;
      if (data.datasets.length > 0) {
        data.labels = Utils.months({count: data.labels.length + 1});

        for (var index = 0; index < data.datasets.length; ++index) {
          data.datasets[index].data.push(Utils.rand(-100, 100));
        }

        chart.update();
      }
    }
  },
  {
    name: 'Remove Dataset',
    handler(chart) {
      chart.data.datasets.pop();
      chart.update();
    }
  },
  {
    name: 'Remove Data',
    handler(chart) {
      chart.data.labels.splice(-1, 1); // remove the label first

      chart.data.datasets.forEach(dataset => {
        dataset.data.pop();
      });

      chart.update();
    }
  }
];
// </block:actions>

// <block:setup:1>
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
    },
    {
      label: 'Dataset 2',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
    }
  ]
};
// </block:setup>

// <block:config:0>
const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  },
};
// </block:config>

module.exports = {
  actions: actions,
  config: config,
};

In old version I used to (this old code is clear and easy to understand):

// chart colors
var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

/* large line chart */
var line = document.getElementById("line");
var chartData = {
  labels: ["S", "M", "T", "W", "T", "F", "S"],
  datasets: [{
    data: [589, 445, 483, 503, 689, 692, 634],
    backgroundColor: 'transparent',
    borderColor: colors[0],
    borderWidth: 4,
    pointBackgroundColor: colors[0]
  }]
};
if (line) {
  new Chart(line, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    },
    responsive: true
  }
  });
}

var line1 = document.getElementById("line1");
if (line1) {
  new Chart(line1, {
      type: 'line',
      data: {
          labels: ['Jan','Feb','Mar','Apr','May'],
          datasets: [
            {
              backgroundColor:'#ffffff',
              borderColor:'#ffffff',
              data: [10, 11, 4, 11, 4],
              fill: false
            }
          ]
      },
      options: lineOptions
  });
}

[LeeLenaleee]

The samples are not a replacement for the documentation, they are more to show what is possible than then to teach you how to use it.

You can check out the docs if you want to know how to use the lib: https://www.chartjs.org/docs/master/getting-started/usage.html

[amirandev]

That`s to bad.
In documentation I can see only an example and different charts need different options to setup.
I can only read what each of the options/parameters do but I need to know which parameters need pie or donut.

[LeeLenaleee]

all the options that applie to pie/doughnut datasets: https://www.chartjs.org/docs/master/charts/doughnut.html#dataset-properties

[chrisribe]

I too am struggling with the samples and documentation.

It is hard to figure out how the samples where built etc. Cool typescript and templating but.
https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts

Like I would like to know where the "actions" fit in all of this ??

const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = Utils.numbers({count: chart.data.labels.length, min: -100, max: 100});
      });
      chart.update();
    }
  },
...

[unluckychild]

yeah, i also got lost there. But theres docs with full script on page and you can just edit type chart and data. easy to make. Just find it :)

[LeeLenaleee]

Well you are welcome to put in a pr request with the changes and we will gladly look at it

[kurkle]

Maybe we should add a link to getting started from samples?

[LeeLenaleee]

Yeah, but maby we can in addition to that also make an index page for the samples that you go to when clicking the samples in the head instead of directly going to the vertical barchart sample.

In this index we can then put an explanation on how the samples are not copy pastable, and reference the getting started page for a fully workable sample that can be coppied.

In here we can also link to the utils explanation page.